jQuery - Form Field Cloning and Removal

HTML

<form method="post" action="#">
    
    <label>Exercises</label>
    
    <fieldset id="exercises">
        <div class="exercise">
            <input type="text" name="amount" value="">
            <input type="checkbox" name="exercise[]" class="boxes"><button class="remove">x</button>
        </div>
    </fieldset>
            
    <button id="add_exercise">add exercise</button>
    
</form>

JavaScript

//Clone and Remove Form Fields

$('#add_exercise').on('click', function() { 
    $('#exercises').append('<div class="exercise"><input type="text" name="amount"><input type="checkbox" name="exercise[]" class="boxes"><button class="remove">x</button></div>');
    return false; //prevent form submission
});

$('#exercises').on('click', '.remove', function() {
    $(this).parent().remove();
    return false; //prevent form submission
});

$(document).on('click','.boxes', function() {
   var sum = 0;
   $('.boxes:checked').each(function(){
     var val = $(this).prev('input').val();
     sum += parseInt(val) || 0;
   });
   console.log("Sum = " + sum);
});