title: Appending to DOM after the loop
body: <p>I would like to know how to append to the DOM just once after these nested loops.
  <strong>Also</strong>, the variable <code>letters</code> is dynamic, so I would need to 'reset' my appended grid when a new string is passed to <code>letters</code></p>
  
  <pre><code>let letters = "abcdefghijkl"
  
  for (let i = 0; i &lt; letters.length; i++) {
    var musicRowID = `${letters.charAt(i)}01`;
    $("#music-grid").append(`&lt;div id="music-row-${musicRowID}" class="row no-gutters"&gt;&lt;/div&gt;`);
  
    for (let j = 1; j &lt;= 12; j++) {
      var columnID = letters.charAt(i) + (j &lt; 10 ? "0" : "") + j;
      $(`#music-row-${musicRowID}`).append(
        `&lt;div class="col-1"&gt;&lt;button id="${columnID}" class="btn bar song"&gt;${columnID.toUpperCase()}&lt;/button&gt;&lt;/div&gt;`
      );
    }
  }
  </code></pre>
  
  <p>Thank you in advance!</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>After the answer from T.J. Crowder I tried to incorporate my code to be able to populate my grid from the inputs, but when I unselect one of the inputs, that row isn't cleared.</p>
  
  <pre><code>let letters = 'abcdefghijkl';
  let html = "";
  
  $(".list-checkbox-item").change(function() {
    let chosenLetters = $(this).val();
    if ($(this).is(":checked")) {
      arrayOfChoices.push(chosenLetters);
    } else {
      arrayOfChoices.splice($.inArray(chosenLetters, arrayOfChoices), 1);
    }
    letters = arrayOfChoices.sort().join(""); // Gives me a string with chosen letters ordered alphabetically
    console.log(
      `This is my string in var 'letters' ordered alphabetically (Need to clear grid after each instantiation or append after the loop): %c${letters}`,
      "color: red; font-weight: bold; font-size: 16px"
    );
  
    for (let i = 0; i &lt; letters.length; i++) {
      var musicRowID = `${letters.charAt(i)}01`;
      html += `&lt;div id="music-row-${musicRowID}" class="row no-gutters"&gt;`; // *** No `&lt;/div&gt;` yet
  
      for (let j = 1; j &lt;= 12; j++) {
        var columnID = letters.charAt(i) + (j &lt; 10 ? "0" : "") + j;
        html += `&lt;div class="col-1"&gt;&lt;button id="${columnID}" class="btn bar song"&gt;${columnID.toUpperCase()}&lt;/button&gt;&lt;/div&gt;`;
      }
  
      html += "&lt;/div&gt;";
    }
    $("#music-grid").html(html);
  });
  </code></pre>
  
  <p>What am I doing wrong?</p>