Bootstrap Dynamic Table

	<script src="//"></script>

<div class="container">
    <div class="row clearfix">
    	<div class="col-md-12 table-responsive">
			<table class="table table-bordered table-hover table-sortable" id="tab_logic">
						<th class="text-center">
						<th class="text-center">
						<th class="text-center">
    					<th class="text-center">
        				<th class="text-center" style="border-top: 1px solid #ffffff; border-right: 1px solid #ffffff;">
    				<tr id='addr0' data-id="0" class="hidden">
						<td data-name="name">
						    <input type="text" name='name0' placeholder='Name' class="form-control">
						<td data-name="mail">
						    <input type="text" name='mail0' placeholder='Email' class="form-control">
						<td data-name="desc">
						    <textarea name="desc0" placeholder="Description" class="form-control"></textarea>
    					<td data-name="sel">
						    <select name="sel0">
        				        <option value""="">Select Option
    					        <option value"1"="">Option 1
        				        <option value"2"="">Option 2
        				        <option value"3"="">Option 3
                        <td data-name="del">
                            <button nam"del0"="" class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>
	<a id="add_row" class="btn btn-default pull-right">Add Row</a>

	<script type="text/javascript"></script>

    .table-sortable tbody tr {
    cursor: move;


	$(document).ready(function() {
    $("#add_row").on("click", function() {
        // Dynamic Rows Code
        // Get max row id and set new id
        var newid = 0;
        $.each($("#tab_logic tr"), function() {
            if (parseInt($(this).data("id")) > newid) {
                newid = parseInt($(this).data("id"));
        var tr = $("<tr></tr>", {
            id: "addr"+newid,
            "data-id": newid
        // loop through each td and create new elements with name of newid
        $.each($("#tab_logic tbody tr:nth(0) td"), function() {
            var cur_td = $(this);
            var children = cur_td.children();
            // add new td and element if it has a nane
            if ($(this).data("name") != undefined) {
                var td = $("<td></td>", {
                    "data-name": $(cur_td).data("name")
                var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
                c.attr("name", $(cur_td).data("name") + newid);
            } else {
                var td = $("<td></td>", {
                    'text': $('#tab_logic tr').length
        // add delete button and td
            $("<button class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>")
                .click(function() {
        // add the new row
        $(tr).find("td button.row-remove").on("click", function() {

    // Sortable Code
    var fixHelperModified = function(e, tr) {
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function(index) {
        return $helper;
    $(".table-sortable tbody").sortable({
        helper: fixHelperModified      

    $(".table-sortable thead").disableSelection();