JSFiddle - React, Tailwind, and code Playground

by Kriti

HTML

<script src="&lt;link rel=&quot;stylesheet&quot; href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; /&gt;   "></script>
<script src="&lt;link rel=&quot;stylesheet&quot; href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; /&gt;   "></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/ui-lightness/jquery-ui.css">
<form name="Basicinfo" id="Basicinfo" method="post" action="Basic.html">
    <!-- Start Header -->
    <table id="phone" width="100%" name="phone">
        <thead>
            <tr>
                <td colspan="5" bgcolor="#5C85B3">Phone</td>
            </tr>
            <tr>
                <th>Type</th>
                <th>Date</th>
                <th>*Phone</th>
                <th>Preferred</th>
                <th>Add/Delete</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <select name="phntype" id="phntype" style="width:50%"></select>
                </td>
                <td>
                    <input class="datepick" id="dob" name="dob" type="text" value="" />
                </td>
                <td>
                    <input type="text" name="phone_no" id="phone_no" value="" class="datepick" />
                </td>
                <td>
                    <input type="text" name="preffered" id="preffered" class="datepick">
                </td>
                <td>
                    <input type="button" id="addnew" value="+" class="add" />
            </tr>
        </tbody>
    </table>
</form>

JavaScript

var newRowNum = 0;
$(".datepick").datepicker();

$('#addnew').click(function () {

    $(".datepick").datepicker("destroy");

    // increment the counter
    newRowNum = $("#phone").children('tbody').children('tr').length + 1;
    // alert(newRowNum);

    // get the entire row
    var addRow = $(this).parent().parent();

    //clone the entire row
    var newRow = addRow.clone();

    // set the values of the inputs to blank in the new row and the value of the add button to "+"
    $('input', addRow).val('');
    $('.add').attr('value', '+');


    // insert the new row into the table
    // "before" the Add row
    addRow.before(newRow);


    $(".datepick").datepicker();

         
    $('.datepick', newRow).each(function (i) {
        var newID = 'date_' + newRowNum;
        $(this).attr('id', newID);
    
    });
    
    // prevent the default click
    return false;
});