SO - 28473973

by Arun P Johny

HTML

<div class=col-lg-6>
     <h1>Pieces</h1>

    <form method=post novalidate>
        <div id=pieces></div>
        <button class='btn btn-success' id=addpiece>Add Piece</button>
        <button class='btn btn-primary'>Submit</button>
    </form>
</div>

JavaScript

//Java script for adding boxes 
$(document).ready(function () {
    var counter = 1;
    $("#addpiece").click(function (e) {
        $("#pieces").append('<div class="piece"><label>Piece ' + counter + ': </label><br>' + '<p id=added' + counter + '><div class=row><div class=col-lg-2><label>Dimensions:</label></div>' + '<div class=col-lg-10><input min=0 step=0.1 style=width:70px; type="number" name="width' + counter + '" required>cm x ' + '<input min=0 step=0.1 style=width:70px; type="number" name="height' + counter + '" required>cm x ' + '<input min=0 step=0.1 style=width:70px; type="number" name="length' + counter + '" required>cm</div></div>' + '<div class=row><div class=col-lg-2><label>Weight:</label></div>' + '<div class=col-lg-10><input min=0.001 step=0.001 style=width:70px; type="number" name="weight' + counter + '" required>KG<br>' + '<input type=hidden name=counter value=' + counter + '><button type="button" class="btn btn-danger remove" id="remove' + counter + '">X</button>' + '</div></div></p><br></div>');
        counter++;
        return false;
    });
    $("#pieces").on('click', '.remove', function(){
        $(this).closest('.piece').remove()
    })

});