.nextUntil возвращает только первый встреченный элемент

#javascript #jquery

Вопрос:

В настоящее время у меня есть блок html, я хочу вывести h4 и блок текста между h4 и другим h4 в виде панели. Так что я могу сделать петлю. Это то, что я пробовал

 <script type="text/template" id="product-details-temp">
 <div class="product-ddd">
    <h4>DETAILS amp;amp; DIMENSIONS</h4>
   <p>A trendy ...</p>
   <p>Made in the USA from...</p>
   <h4>FABRIC CONTENT amp;amp; CARE</h4>
   <p>Jacket / Tank:</p>
   <ul>
       <li>Hand Wash Cold</li>
       <li>No Chlorine</li>
       ...
   </ul>
   <h4>DETAILS amp;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 amp;amp; $(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>
 

Случается, что $(this).nextUntil("h4") единственный возвращаемый элемент, с которым он сталкивается, игнорирует остальные до следующего h4 и продолжает итерацию.