Is there a function or way to stop the setinterval function from keep on running after a match in jQuery or JS?

The project that I’m working on, generates 2 different p elements and each one is triggered independently. It takes about 5 seconds to load after the callback. I have no control over any of these p elements, but to wait for it to finish loading so I can run a script. I’m using the setInterval() function to check when one of the p elements loads up. I then insert a div element before the p element. For this I’m targeting the class of each p element with a switch statement.

The issue I have is that this will keep generating the div over and over and I only need it once after each call. I can stop the intervals with the clearInterval() but that kills it completely and have no way to restart it because it will not fire back again even if I call the setInterval() function.

Is there a way I can approach this maybe in a different and better way without the setInterval()?

function whichOneisVisible() {
    var target = $('.result-content').children("p:first");

        switch (target.attr('class')) { 
          case "available": 
             console.log('Congrats, this p element is available!');
                
            clearInterval(check);
            break;
          case "not-available": 
             console.log('Sorry, this p element is NOT available!');

            break;
          default:      
            console.log('Nothing is available!');
        } 
}
check = setInterval(whichOneisVisible, 550);    

The html..

<div class="result-content">
    <p class="not-available">This P element is not available</p>
    <div>This is just a div</div>
    <div>This is just a div</div>
    <div>This is just a div</div>
</div>