Actualmente tengo un bloque de html, quiero generar el h4 y el bloque de texto entre el h4 y otro h4 como panel. Entonces puedo hacer un bucle. Esto es lo que he probado

 <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>

Ocurre que $(this).nextUntil("h4") solo devuelve el primer elemento que encuentra e ignora el resto hasta el siguiente h4 y continúa la iteración.