jQuery - Clone div

HTML

<div id="clonedInput1" class="clonedInput">
<input type="text" class="calculate" id="cabwidth" placeholder="Cabinet Width" />
<div id="sum" class="sum">
    <div class="actions">
        <button class="clone">Add</button> 
        <button class="remove">Remove</button>
    </div>
</div>
</div>

CSS

body { padding: 10px;}

.clonedInput { padding: 10px; border-radius: 5px; background-color: #def; margin-bottom: 10px; }

.clonedInput div { margin: 5px; }

JavaScript

var regex = /^(.+?)(\d+)$/i;
var cloneIndex = $(".clonedInput").length;

function clone(){

		// Clone
    var new_calc = $(this).parents('.clonedInput').clone().attr('id', 'clonedInput'+cloneIndex);
    
    // Update IDs on children
    $.each(new_calc.find('*'), function(i, element){
    	var id = (typeof($(element).attr('id')) !== 'undefined' ? $(element).attr('id', $(element).attr('id') + cloneIndex) :  '');
    })
   
   	// Append to body
    new_calc.appendTo('body');

    cloneIndex++;
}

function remove(){
    $(this).parents(".clonedInput").remove();
}

// calculator
$(document).ready(function() {    

    $(document).on('keyup change', '.calculate', function(e) {
    		
        var $calc = $(this);
        var $sum = $calc.siblings('.sum');
    
        var cabwidth = parseFloat($calc.val()) || 0;
        var ply = 1.4375;
        var value = cabwidth - ply;
        
        if (!isNaN(value) && value !== Infinity) {
            $sum.text(value);
        }
    });
    
    $(document).on("click", "button.clone", clone);

		$(document).on("click", "button.remove", remove);	
});