display multiple instances of the same div with different title

Question

I would like to display a particular div multiple times depending on the number of checkboxes selected in a previous step. Similar to step 3.2 in this form. What is the best way to do so?

Div that I want to be displayed multiple times depending on number of checkboxes selected, where h3 (#tile_name) is the value of the checkbox:

<div class="plan_select" id="border">
  <h3 id="tile_name">Tiles - Selected</h3>
  <div class='styled-select'>
    <select name='bankskivans'>
      <option value='Halvrund'>Halvrund</option>
      <option value='Helrund'>Helrund</option>
      <option value='Karnis helrund'>Karnis helrund</option>
      <option value='Nosformad'>Nosformad</option>
      <option value='Rak fasad'>Rak fasad</option>
      <option value='Rak rundad'>Rak rundad</option>
      <option value='Vattenfall'>Vattenfall</option>
    </select>
  </div>
</div>

JS Fiddle https://jsfiddle.net/L7swuv8g/

JQuery code:

$(document).ready(function() {
  var $measures = $('input.checkbox_plan');
  var $showmeasures = $('input[name="measures_show"]');
  var $border = $('div#border');

  $measures.hide();
  $border.hide();
  $showmeasures.on('click', function() {
    if ($(this).is(':checked')) {
      $measures.show();
      $border.show();
    } else {
      $measures.hide();
      $border.hide();
    }
  });
});

Answer 1

Not sure exactly what you want, but maybe this works for you?

I made it so it will make an instance of your template-content for each checked checkbox. (Or none, if none are selected.)

https://jsfiddle.net/d6k40wd0/2/

HTML:

<div id='template' style='display:none'>
  <div class='plan_select' id='border'>
    <h3 id='tile_name'>#title#</h3>
    <div class='styled-select'>
      <select name='bankskivans'>
        <option value='Halvrund'>Halvrund</option>
        <option value='Helrund'>Helrund</option>
        <option value='Karnis helrund'>Karnis helrund</option>
        <option value='Nosformad'>Nosformad</option>
        <option value='Rak fasad'>Rak fasad</option>
        <option value='Rak rundad'>Rak rundad</option>
        <option value='Vattenfall'>Vattenfall</option>
      </select>
    </div>
  </div>
</div>

<label for="a"><input type="checkbox" id="a" value="alpha" class="templateChoice" />Choose a.</label>
<label for="b"><input type="checkbox" id="b" value="bravo" class="templateChoice" />Choose b.</label>
<label for="c"><input type="checkbox" id="c" value="charlie" class="templateChoice" />Choose c.</label>
<label for="d"><input type="checkbox" id="d" value="delta" class="templateChoice" />Choose d.</label>
<br />
<button type="button" onclick="showResult();">Show result</button>
<hr />
<div id="result"></div>

JavaScript:

function showResult() {
  var template = $("#template").html();
  $("#result").html("");
  $.each($(".templateChoice"), function(index, checkbox) {
    if (checkbox.checked) {
        var templateCopy = template.replace("#title#", "You selected " + checkbox.value);
        $("#result").html($("#result").html() + templateCopy);
    }
  });
}