<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <table> <thead> <tr> <th><label>Glucosa</label></th> <th><label>Data</label></th> <th></th> </tr> </thead> <tfoot> <tr> <td><span class="label label-warning">>140</span> <span class="label label-danger">>200</span></td> <td></td> <td></td> </tr> </tfoot> <tbody> <tr> <td><input class="form-control" name="glucosa[]" type="text" placeholder="Glucosa" /></td> <td><input class="form-control" width="3" name="col_data[]" type="text" placeholder="Data" data-provide="datepicker" /></td> <td> <button class="btn btn-success btn-add" type="button"> <i class="glyphicon glyphicon-plus gs"></i> </button> </td> </tr> </tbody> </table>

.entry:not(:first-of-type) { margin-top: 10px; } .glyphicon { font-size: 12px; } td { padding:2px; }

$(function() { $(document).on('click', '.btn-add', function(e) { e.preventDefault(); var controlForm = $(this).closest('table'), currentEntry = $(this).parents('tr:first'), newEntry = $(currentEntry.clone()).appendTo(controlForm); newEntry.find('input').val(''); controlForm.find('tr:not(:last) .btn-add') .removeClass('btn-add').addClass('btn-remove') .removeClass('btn-success').addClass('btn-danger') .html('<span class="glyphicon glyphicon-minus gs"></span>'); }).on('click', '.btn-remove', function(e) { $(this).parents('tr:first').remove(); e.preventDefault(); return false; }); });