title: Mutating the DOM with elements including different indexable variables
body: <p>Hope my title isn't misleading! 
  In my quest discovering the power of loops, I would like to sort this:</p>
  
  <p>I need to build these elements:</p>
  
  <pre><code>&lt;div id="my-id"&gt;
    &lt;div class="my-class"&gt;
      &lt;input type="checkbox" id="checkbox-1" value="a"&gt;
      &lt;label for="checkbox-1"&gt;A&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="my-class"&gt;
      &lt;input type="checkbox" id="checkbox-2" value="b"&gt;
      &lt;label for="checkbox-2"&gt;B&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="my-class"&gt;
      &lt;input type="checkbox" id="checkbox-3" value="c"&gt;
      &lt;label for="checkbox-3"&gt;C&lt;/label&gt;
    &lt;/div&gt;
  &lt;!-- etc, 9 more --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I did this so far but don't know how to proceed to get the alphabet letters (both lower and uppercase) in the element.</p>
  
  <pre><code>const alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"]; 
  
    let html = "";
    for (let i = 1; i &lt;= 12; i++) {
      html += `&lt;div class = "my-class"&gt;
                  &lt;input type = "checkbox" id = "checkbox-${i}" value = "?"&gt;
                  &lt;label for = "checkbox-${i}"&gt;??`;
      html += "&lt;/label&gt;&lt;/div&gt;";
    }
    $("#here").html(html);
  </code></pre>
  
  <p>Is there a good way, or just hardcoding in the HTML file will be easier? (it's 12 inputs in total).</p>
  
  <p>Thanks for the help in advance!!</p>