Dynamic Colums And Row Using Jquery

<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
      rel="stylesheet" type="text/css" />

<table class="dynatable">
    <thead>
        <tr class="Header">
            <th id="AddRowTh"><button class="add">Add Row</button></th>
            <th>ID &nbsp;&nbsp;<a href="#" class="RemoveColumn" onclick='remcol(this)'>Remove</a></th>
        </tr>
    </thead>
    <tbody>
        <tr class="prototype" id="tr0">
            <td><p class='RowName'></p><a href='#' class='RemoveRow' onclick='rem(this)'>Remove</a></td>
            <td><input type="text" id="NewID" /></td>
        </tr>
    </tbody>
</table>

<!--<input id="col" placeholder="Enter Heading" />-->
<select id="HeaderTitle">
    <!--<option value="0">ID</option>-->
    <option value="1">Size</option>
    <option value="0">Dimention</option>
</select>
<input type="button" id="btnShow" value="+" />

<select id="controlType">
    <option value="0">Textbox</option>
    <option value="1">TextArea</option>
</select>
<button id="icol">Insert Column</button>

<div id="dialog" style="display: none" align="center">
    <input id="col" placeholder="Enter Heading" /> <input type="submit" value="Save" id="btnSave" />
</div>

<!--<button id="test">Testing</button>-->

<script>

    $(function () {
        $("#dialog").dialog({
            modal: true,
            autoOpen: false,
            title: "jQuery Dialog",
            width: 300,
            height: 150
        });
        $("#btnShow").click(function () {
            $('#dialog').dialog('open');
        });

        $('#btnSave').click(function () {
            $('#dialog').dialog('close');
            $("#HeaderTitle").append('<option value=3>' + $('#col').val() + '</option>');
            return false;
        });
    });

    var rows = [];
    $(document).ready(function () {
        var columnCount = $('.dynatable tbody tr td').length;
        var rowCount = $('.dynatable tbody tr').length;

        if (columnCount == 2) {
            $("#NewID").attr('id', "Id_0");
        }
    });

    function rem(row) {
        $(row).parent().parent().remove();
        return false;
    }

    $('.add').click(function () {

        var lasttr = $(".dynatable tbody tr:last").attr('id');
        var oldNo = parseInt(lasttr.replace('tr', ''));
        var controls = "";
        var kl = $(".dynatable tbody tr:last").clone();
        var k = 0;
        var j = $('.dynatable > tbody > tr').length;

        $('.dynatable > tbody > tr:last > td').each(function () {

            var ctrlName = $(this).html();

            if (k != 0) {
                var op = ctrlName.split('_');
                var kl = op[1].split('"');
                controls += "<td>" + op[0] + '_' + j + '"' + kl[1] + "</td>";
            }
            else {
                controls = "<td><p class=\"RowName\"></p><a href=\"#\" class=\"RemoveRow\" onclick='rem(this)'>Remove</a></td>";
                k++;
            }
        });
        var $row = $(controls);
        $('.dynatable tr:last').after('<tr></tr>');
        var newid = "tr" + (parseInt(oldNo) + 1);
        $(".dynatable tbody tr:last").attr('id', newid);
        $('#'+newid).append($row);
    });

</script>

<!--Column Add-->
<script>
    $('#icol').click(function () {
        if ($('#HeaderTitle').val()) {

            var selectedValue = $('#HeaderTitle').val();
            var pl = $("table").find("tr:first td").length;

            $('.dynatable thead tr').append($("<th>"));
            $('.dynatable tbody tr').append($("<td>"));
            $('.dynatable thead tr>th:last').html($("#HeaderTitle option:selected").text() + "&nbsp;&nbsp;<a href='#' class='RemoveColumn' onclick='remcol(this)'>Remove</a>");

            var klp = pl;
            $('.dynatable tbody tr').each(function () {

                var rowid = $(this);
                var txtid = $("#HeaderTitle option:selected").text() + "_" + klp;
                var ControlId = $('#controlType').val();

                if (ControlId == 0) {
                    $(this).children('td:last').append($('<input type="textarea" id="' + txtid + '">'))
                }
                else {
                    $(this).children('td:last').append($('<textarea rows="4" cols="30" id="' + txtid + '"></textarea>'))
                }
                klp = klp + 1;
            });
            $("#HeaderTitle option[value='" + selectedValue + "']").remove();

        } else { alert('Enter Text'); }
    });
</script>

<style>
    .ui-widget {
        font-size: 0.9em !important;
    }
</style>