Cloned inputs have no value - Combodate

Question

I'm using Combodate to break up inputs for easier time entry. I'm also allowing multiple times to be entered. Issue is, cloned inputs don't receive a value.

Combodate appears to be initializing, but clearly not working properly and can be see here: https://jsfiddle.net/klav/xpvt214o/133229/

HTML

<button class="btn" id="btnAddDate">Add Time</button>

<div id="dateinfo1" class="clonedInput1 dashboard-item-frame">
    <button class="btn toggle pull-right">Show Input</button>
    <input type="text" style="display: block;" 
    data-format="h:mm A" data-template="h : mm A" class="start_time 
    combotime" name="start_time[0]" value="">
</div>

jQuery

$('.combotime').combodate();

$('#btnAddDate').click(function (e) {
        e.preventDefault();
        var num     = $('.clonedInput1').length,
        newNum  = new Number(num + 1),
        newElem = $('#dateinfo' + num)
            .clone(true)
            .attr('id', 'dateinfo' + newNum)
            .fadeIn('slow');
        newNumLess  = newNum - 1;

        // Clear inputs
        newElem.find('input:text').val("").end();
        newElem.find('.start_time')
            .removeClass('combotime')
            .addClass('combotime').combodate();
        newElem.find('.start_time')
            .attr('name', 'start_time[' + newNumLess + ']')
            .val([]);

        $('#dateinfo' + num).after(newElem);
        $('#ID' + newNum + '_title').focus();
    });

Answer 1

Changed a couple of things to get it working but basically it seems that passing true to .clone() was preventing any new handlers from taking over the old ones, hence, and this is my assumption, the new call to .combodate() was not actually working and replacing the old elements like span.

Changes

1. replace .clone(true) with .clone()
2. Remove old span tag

3. As a consequence of removing true param, the handlers are not passed down to the clone so,

   $('button.toggle').click(function(){
       $(this).parent().find('input').toggle();
       $(this).parent().find('.combodate').toggle();
   });
   

does not work and is replaced with

    //the important part here is the use of $(document).on()
    //instead of $('button.toggle').click().
    //using `.siblings()` is just some minor optimizing
    $(document).on('click', 'button.toggle', function(){
        $(this).siblings('input, .combodate').toggle();
    });

in order for the .click() handler be applied to any newly added button.toggle.

HIH

$('.combotime').combodate();

$('#btnAddDate').click(function (e) {
		e.preventDefault();
		var num     = $('.clonedInput1').length,
		newNum  = new Number(num + 1),
		newElem = $('#dateinfo' + num).clone(/*removed true*/).attr('id', 'dateinfo' + newNum).fadeIn('slow');
    
    //remove old span
    newElem.children('span').remove();
    
		newNumLess  = newNum - 1;
    
    //re-run .combodate()
		newElem.find('.start_time').val("").combodate();
    
		$('#dateinfo' + num).after(newElem);
		$('#ID' + newNum + '_title').focus();
	});
  
  //fix consequence of removing true param
  $(document).on('click', 'button.toggle', function(){
    //$(this).parent().find('input, .combodate').toggle();
    $(this).siblings('input, .combodate').toggle();
    
  });

.row {
  padding: 20px;
}

#btnAddDate {
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://smartsitterville.smartsitting.com/admin/dist/js/combodate.js"></script>
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">

<button class="btn" id="btnAddDate">
Add Time
</button>
<div id="dateinfo1" class="clonedInput1 dashboard-item-frame">
  <button class="btn toggle pull-right">Show Input</button>
  <input type="text" style="display: block;" data-format="h:mm A" data-template="h : mm A" class="start_time combotime" name="start_time[0]" value="">
</div>

</div>
</div>