title: Copy div content to another div and replace words
body: <p>Trying to copy div content from a template div (o_time_templ) to another and replace two words in it.
  On change of select it should copy the content, put it in 'o_time_mss' and replace change 1 and 2.</p>
  
  <p>My code is below. The clone contents are empty after the first clone.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('select[id=o_time]').on('change', function() {
    var template = $("#o_time_templ p").clone().html();
  
    var delTimeVars = $('#o_time').val();
    delTimeVars = delTimeVars.split('-');
    var delTime = delTimeVars[0];
    var delTime_price = delTimeVars[1];
  
    if (delTime_price != undefined) {
      $("#o_time_mss").replaceWith(template);
      $("#o_time_mss p").text($("#o_time_mss p").text().replace("o_time_zone_screen", delTime).replace("o_time_price_screen", delTime_price));
      $("#o_time_mss").show();
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;select class="form-control" name="o_time" id="o_time" required&gt;
    &lt;option value=""&gt;Delivery time&lt;/option&gt;
    &lt;option value="Normal lunch"&gt;Normal lunch&lt;/option&gt;
    &lt;option value="Breakfast-20"&gt;Breakfast&lt;/option&gt;
    &lt;option value="After 5pm-40"&gt;After 5pm)&lt;/option&gt;
    &lt;option value="Saturday-120"&gt;Saturday&lt;/option&gt;
    &lt;option value="Sunday-120"&gt;Sunday&lt;/option&gt;
  &lt;/select&gt;
  &lt;div class="hidden" id="o_time_mss"&gt;
    &lt;p&gt;change 1: o_time_zone_screen AND change 2: o_time_price_screen&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="hidden" id="o_time_templ"&gt;
    &lt;p&gt;change 1: o_time_zone_screen AND change 2: o_time_price_screen&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>