Add/Remove a column in html table

@{
    ViewBag.Title = "addremoveColumns";
}

<h2>Add/Remove Columns</h2>

<input type="button" id="btn_addcolumn" value="Add Column" /> <br />
<input type="button" id="btn_deletecolumn" value="Delete Column" />

<table  id="tbl_customers">
    <thead>
        <tr>
<th>Customer ID</th><th>Name</th><th>Age</th><th>Account Type</th>
        </tr>
    </thead>
    <tbody>
        <tr>
<td>1</td><td>Ram</td><td>20</td><td>Student Account</td>
        </tr>
        <tr>
<td>2 </td><td>Balu</td><td>20</td><td>Student Account</td>
        </tr>
        <tr>
<td>3</td><td>Sidhu</td><td>25</td><td>Savings Account</td>
        </tr>
    </tbody>
 </table>




<script type="text/javascript">
    $(function () {

        var tbl = $('#tbl_customers');

        //change the cursor to hand on hovering the columns
        $(tbl).find('thead tr th').hover(function () {
            $(this).css('cursor', 'pointer');
        });

        //for setting the cssclass for the selected column header and cells, for deletion
        $(tbl).find('thead tr th').click(function () {

            $('#tbl_customers thead tr th').css('background-color', '');
            $('#tbl_customers tbody tr td').css('background-color', '');
            $('#tbl_customers thead tr th').removeClass('selectedHeader');
            $('#tbl_customers tbody tr td').removeClass('selectedCell');

            $(this).addClass('selectedHeader');
            $(this).css('background-color', 'lightblue');
            var index = $(this).index() + 1;
            var tbl = $('#tbl_customers');
            var tds = $(tbl).find('td:nth-child(' + index + ')');
            $(tds).addClass('selectedCell');
            $(tds).css('background-color', 'lightblue');
        });
    });

    //add column button click event
    $('#btn_addcolumn').unbind("click").click(function () {

        //for adding column header
        var tbl = $('#tbl_customers');
        var gridhdrRow = $(tbl).find('thead tr').first();
        var gridhdrCell = $(gridhdrRow).find('th');

        $(gridhdrRow).append('<th style="width:80px;"></th>');
    


        //adding cells for newly added header column
        var noofRows = $(tbl).find('tbody tr');
        var cellLength;
        $.each(noofRows, function (index, row) {
            $(row).append('<td style="width:80px;" class="RowCell"></td>');
        });
      
        //change the cursor to hand on hovering the columns
        $(tbl).find('thead tr th').hover(function () {
            $(this).css('cursor', 'pointer');
        });
      
        //for setting the cssclass for the selected column header and cells, for deletion
        $(tbl).find('thead tr th').click(function () {

            $('#tbl_customers thead tr th').css('background-color', '');
            $('#tbl_customers tbody tr td').css('background-color', '');
            $('#tbl_customers thead tr th').removeClass('selectedHeader');
            $('#tbl_customers tbody tr td').removeClass('selectedCell');
          
            $(this).addClass('selectedHeader');
            $(this).css('background-color', 'lightblue');
            var index = $(this).index() + 1;
            var tbl = $('#tbl_customers');
            var tds = $(tbl).find('td:nth-child(' + index + ')');
            $(tds).addClass('selectedCell');
            $(tds).css('background-color', 'lightblue');
        });
    
    });


    //for remove column button click event
    $('#btn_deletecolumn').unbind("click").click(function () {

        //for removing the selected column header
        var tbl = $('#tbl_customers');
        var gridhdrRow = $(tbl).find('thead tr').first();
        var gridhdrCell = $(gridhdrRow).find('th.selectedHeader');

        var delCnt = $(gridhdrCell).html();
      
        if (delCnt == null) {
            customDialog("Warning", "Please select column to delete");
        }
        else { //for removing selected header
            $(gridhdrCell).remove();
            customDialog("Delete Confirmation", "Column deleted successfully.");
        }

    
        //for removing selected cells from the content table
        var noofRows = $(tbl).find('tbody tr');
        $.each(noofRows, function () {
            var selectedTd = $(this).find('td.selectedCell');
            $(selectedTd).remove();
        });
      

    });

    //for jquery custom dialog box
    function customDialog(headerValue, message) {

        //remove the existing div
        var divs = $('body').find('div[id="div_customDialog"]');

        $.each(divs, function (index, divItem) {
            $(divItem).remove();
        });

        //add new div
        $('body').append('<div id="div_customDialog"></div>');

        $('#div_customDialog').html(message);

        $('#div_customDialog').dialog({
            draggable: true,
            modal: true,
            resizable: false,
            width: 'auto',
            title: headerValue,
            minHeight: 75,
            buttons: {
                OK: function () {
                    $(this).dialog('close');
                    $(this).dialog('destroy');
                }
            }
        });

        $('#div_customDialog').dialog('open');
    }

</script>

Controller:-

  public ActionResult addremoveColumns()
        {
            try
            {
                return View();
            }
            catch (Exception)
            { }
            return null;
        }