Извлекает заголовки из контейнера div и создает список ul

Question

Здесь у меня есть html, и код jquery извлекает заголовки из контейнера .p_table_section и отображает список, чего я надеюсь достичь, это извлечь заголовки из контейнера div.p_table_section и создать отдельный ul list

, то есть каждый контейнер .p_table_section будет отображать новый список, текущий код, который у меня есть, отображает все только в одном списке

Пожалуйста, посмотрите мою скрипку здесь https://jsfiddle.net/chwaj745/

<div class="container">

<div class="sidebar">
<div class="toc"></div>
</div>

<div class="content">

<div class="p_table_section">
  <h2 class="product_table_heading">Heading 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum augue quam.</p>
  <h3 class="post-product-table_title">1 product 1-a</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum augue quam.</p>
  <h3 class="post-product-table_title">2 product 1-b</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum augue quam.</p>
  <h3 class="post-product-table_title">3 product 1-c</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum augue quam.</p>
</div><!-- END p_table_section -->

<div class="p_table_section">
  <h2 class="product_table_heading">Heading 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum augue quam.</p>
  <h3 class="post-product-table_title">1 product 2-a</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum augue quam.</p>
  <h3 class="post-product-table_title">2 product 2-b</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum augue quam.</p>
</div><!-- END p_table_section -->

</div><!-- END content -->

</div><!-- END container -->

и вот код jquery для отображения оглавления

jQuery(function() {
    var regex = /[^a-zA-Z-]/g;

    var ToC =
      "<ul class='vNav'>";

    var newLine, el, title, link;


    jQuery(".p_table_section h2.product_table_heading, .p_table_section h3.post-product-table_title").each(function() {


        el = jQuery(this);
        title = el.text();
        link = "#" + el.text().toLowerCase().replace(regex, "-");

        jQuery(this).attr('id', title.toLowerCase().replace(regex, "-"));


        if (jQuery(this).closest("h2.product_table_heading").length) {      
            newLine =
            "<li class='pt_heading'>" +
              "<a href='" + link + "'><span class='vNav_dot'></span><font>" +
                title +
              "</font><span class='vNav_line'></span></a>" +
            "</li>";
        } else {
            newLine =
            "<li class='pt_list'>" +
              "<a href='" + link + "'><span class='vNav_dot'></span><font>" +
                title +
              "</font><span class='vNav_line'></span></a>" +
            "</li>";

        }


            ToC += newLine;
    });


    ToC +=
       "</ul>";


    jQuery(".toc").prepend(ToC);


});