I currently have a block of html, I want to output the h4 and the block of text between the h4 and another h4 as a panel. So I can make a loop. This is what I have tried

<script type="text/template" id="product-details-temp">
 <div class="product-ddd">
    <h4>DETAILS &amp; DIMENSIONS</h4>
   <p>A trendy ...</p>
   <p>Made in the USA from...</p>
   <h4>FABRIC CONTENT &amp; CARE</h4>
   <p>Jacket / Tank:</p>
   <ul>
       <li>Hand Wash Cold</li>
       <li>No Chlorine</li>
       ...
   </ul>
   <h4>DETAILS &amp; OTHERS </h4>
 </div>
</script>
<script>    
   let titleArray = [];
   let textArray = [];
    let htmlTemplate = $("#product-details-temp").text();
    $(htmlTemplate).find('h4').each(function () {
        console.log($(this).nextUntil("h4").html());
        if ($(this).html() != undefined && $(this).nextUntil("h4").html() != undefined) {
            $(".product-panel-lists").append(
                '<div class="header">' + $(this).html() + '<i class="fas fa-chevron-down"></i></div><div class="panel">' + $(this).nextUntil("h4").html() + "</div>"
            );
        }
    });
</script>

It occur that the $(this).nextUntil("h4") only return the first element it encounter and ignore the rest until the next h4 and continue the iteration.