title: Recursive JavaScript function for nested content prematurely generates closing tag
body: <p>I'm trying to process a JavaScript array containing various levels of objects into HTML content that contains levels and sublevels.</p>
  
  <p>To do this, I generate HTML code that I then push into a separate array.</p>
  
  <p>I check for the property "subsections", and if it exists, I call the function again.</p>
  
  <p>However, after the function is called, I push a final closing  tag into the array to signify that the current section has been fully generated, however, the closing tag has been pushed into the array BEFORE the function is called, meaning that every  is prematurely closed.</p>
  
  <p>If anyone can help that would be great thanks!</p>
  
  <p><a href="https://jsfiddle.net/Gavmastaphlex/ds3xe5hg/" rel="nofollow noreferrer">Here's the JSFiddle.</a></p>
  
  <p>And here's the summarized JavaScript code:</p>
  
  <pre><code>            var newContent = [];
              var content = [{
                      name: 'layer1',
                      content: '&lt;p&gt;This is where the content for layer 1 will go. Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;'
                  },{
                      name: 'layer2',
                      content: '&lt;p&gt;This is where the content for layer 2 will go. Integer efficitur nulla faucibus, tempus sapien a, malesuada dui. &lt;/p&gt;',
                      subsections: [{
                          name: 'layer2a',
                          content: '&lt;p&gt;This is where the content for layer 2a will go. Quisque faucibus sem id nibh efficitur venenatis.&lt;/p&gt;'
                          ]}
                  },{
                      name: 'layer3',
                      content: '&lt;p&gt;This is where the content for layer 3 will go. Etiam mi nibh, fermentum scelerisque eros condimentum, laoreet eleifend ante.&lt;/p&gt;'
                  },{
                      name: 'layer4',
                      content: '&lt;p&gt;This is where the content for layer 4 will go. Nulla dui libero, varius id lacus in, cursus vehicula massa. Sed arcu enim, molestie nec magna ullamcorper, vehicula efficitur sapien.&lt;/p&gt;',
                      subsections: [{
                          name: 'layer4a',
                          content: '&lt;p&gt;This is where the content for layer 4a will go. Quisque faucibus sem id nibh efficitur venenatis.&lt;/p&gt;',
                          subsections: [{
                                  name: 'layer4b',
                                  content: '&lt;p&gt;This is where the content for layer 4b will go. Nam id sapien auctor, egestas nulla a, cursus odio.&lt;/p&gt;'
                          }]
                      }]
                  }
              ]
  
              $(document).ready(function(){
                  loopNestedContent(content);
                  $('#output').html(newContent);
              })
  
              function loopNestedContent(targContent) {
                  for (let i = 0; i &lt; targContent.length; i++) {
                      newContent.push('&lt;h3 id="' + targContent[i].name + '" class="trigger"&gt;' + targContent[i].name + '&lt;span&gt;+&lt;/span&gt;&lt;/h3&gt;');
                      newContent.push('&lt;div id="' + targContent[i].name + 'Info" class="info"&gt;');
                      newContent.push(targContent[i].content);
                      if (hasProp(targContent[i], 'subsections')) {
                          loopNestedContent(targContent[i].subsections);
                      }
                      newContent.push('&lt;/div&gt;');
                  }
              }
  
              $(document).on('click', '#output .trigger', function() {
                  $('.helpInfo').css('display', 'none');
                  $('.trigger span').html('+');
                  $('#' + $(this).attr('id') + 'Info').css('display', 'block');
                  $(this).children('span').html('-');
              })
  
              function hasProp (obj, prop) {
                  return Object.prototype.hasOwnProperty.call(obj, prop);
              }
  </code></pre>
  
  <p>Thanks so much!</p>