title: Set ID as incremental variable in HTML
body: <p>This is a long shot, as I'm not sure if this can even be done, so if it cannot, any suggestions as to an approach are appreciated. </p>
  
  <p>I have an accordion within my HTML, where each contains a section of my XML document. To get the accordion to set the sections and apply them to open and close each section, I need to assign a number variable as the ID to each one. My accordion code in the HTML is as below:</p>
  
  <pre><code>&lt;article class="accordion"&gt;
  
          &lt;section id="start"&gt;
  
              &lt;h2 id="title"&gt;&lt;a href="#start"&gt;&lt;/a&gt;&lt;/h2&gt;
              &lt;p id="text"&gt;&lt;/p&gt;
              &lt;p id="quote"&gt;&lt;/p&gt;
              &lt;p id="link"&gt;&lt;/p&gt;
  
              &lt;b id="foot"&gt;&lt;p id="date"&gt;&lt;/p&gt;&lt;/b&gt;
              &lt;b id= "foot"&gt;&lt;p id="tags"&gt;&lt;/p&gt;&lt;/b&gt;
  
          &lt;section&gt;
          &lt;/article&gt;
  </code></pre>
  
  <p>Each part is set within my JavaScript file, which is appending the data correctly for the first one from viewing the output elsewhere, but is not visible as it cannot be clicked on without the variable.
  My JavaScript contains, the below as a snippet of the title, and I am wondering if there is a way to use the variable i in my HTML? They are separate files rather than the JavaScript being in the HTML file.</p>
  
  <pre><code>var count = 1;
  
      for(i=0; i&lt;x.length;i++)
      {
          document.getElementById("start").id = count;
  
          title=(x[i].getElementsByTagName("postTitle")[i].childNodes[i].nodeValue);
          document.getElementById("title").innerHTML=title;
  
          count = count + 1;
      }
  </code></pre>
  
  <p>From testing the accordion by other means, I know it works, I just need to set the variable to be able to get it to work in this.</p>
  
  <p>Thanks.</p>