Скопируйте содержимое div в другой div и замените слова

Question

Пытается скопировать содержимое div из шаблона div (o_time_templ) в другое и заменить в нем два слова. При изменении выбора он должен скопировать содержимое, поместить его в «o_time_mss» и заменить изменения 1 и 2.

Мой код ниже. Содержимое клона пуст после первого клона.

$('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(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="form-control" name="o_time" id="o_time" required> 
 
    <option value="">Delivery time</option> 
 
    <option value="Normal lunch">Normal lunch</option> 
 
    <option value="Breakfast-20">Breakfast</option> 
 
    <option value="After 5pm-40">After 5pm)</option> 
 
    <option value="Saturday-120">Saturday</option> 
 
    <option value="Sunday-120">Sunday</option> 
 
</select> 
 
<div class="hidden" id="o_time_mss"> 
 
    <p>change 1: o_time_zone_screen AND change 2: o_time_price_screen</p> 
 
</div> 
 
<div class="hidden" id="o_time_templ"> 
 
    <p>change 1: o_time_zone_screen AND change 2: o_time_price_screen</p> 
 
</div>

Answer 1

Не заменять o_time_mss с шаблоном, поскольку он заменит все содержимое HTML с текстом. Использовать html()

$("#o_time_mss").html(template);