title: How to reuse HTML snippets but change IDs of elements within them
body: <p>I'm building a browser-based drum machine, that allows the user to change the number of individual drum parts.</p>
  
  <p>I have a chunk of HTML, that I wish to reuse for each drum part, which allows the user to change settings for that drum. As the user changes the amount of drum parts, a copy of this snippet should be appended to the page but with the ID for each element (and the contents of the h3 tag) reflecting the Drum Number it represents.</p>
  
  <p>The HTML:  </p>
  
  <pre><code>&lt;div class="drumSettings" id="drum1Settings"&gt;
          &lt;h3&gt;Drum 1&lt;/h3&gt;
          &lt;div class="settings-item"&gt;
              &lt;label for="drum1SectorCount"&gt;Sectors&lt;/label&gt;
              &lt;input type="number" name="drum1SectorCount" id="drum1SectorCount" value="16" min="2" max="32" onchange="redrawDrumLayer(this, 0)"&gt;
          &lt;/div&gt;
          &lt;div class="settings-item"&gt;
              &lt;label for="drum1Sample"&gt;Sample&lt;/label&gt;
              &lt;select name="drum1Sample" id="drum1Sample" onchange="changeDrumSample(this, 0)"&gt;
                      &lt;option value="samples/808 Kick.wav" selected="selected"&gt;808 Kick&lt;/option&gt;      
                      &lt;option value="samples/808 Snare.wav"&gt;808 Snare&lt;/option&gt;
                      &lt;option value="samples/808 Closed HiHat.wav"&gt;808 Closed HiHat&lt;/option&gt;
                      &lt;option value="samples/808 Open HiHat.wav"&gt;808 Open HiHat&lt;/option&gt;  
                      &lt;option value="samples/808 Clap.wav"&gt;808 Clap&lt;/option&gt;
                      &lt;option value="samples/808 Low Tom.wav"&gt;808 Low Tom&lt;/option&gt;
                      &lt;option value="samples/808 Mid Tom.wav"&gt;808 Mid Tom&lt;/option&gt;
                      &lt;option value="samples/808 High Tom.wav"&gt;808 High Tom&lt;/option&gt;
                      &lt;option value="samples/808 Cowbell.wav"&gt;808 Cowbell&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>For example, the outer div for Drum 2 should have the ID 'drum2Settings' and the input element should have the ID 'drum2SectorCount'.</p>
  
  <p>I already know one possible way of doing this: Writing the snippet over and over in HTML (up to the maximum possible number of drums allowed) and changing the display property to hide/show elements when needed&mdash;but this would result in a large HTML file (especially as I hope to add more settings for each drum in the future) and definitely goes against the Don't-Repeat-Yourself Methodology.</p>
  
  <p>Is there a JavaScript or jQuery method that can take this first snippet and copy it while incrementing the numbers in it?</p>