Add Temporary Row Into Table Using JQuery Panel Slider

Step 1 -  First Create Table using HTML and CSS. Designing code is below

<div id="flip1" style="background-color:#b4d8d9; height:30px;margin-top:20px; font-weight:bold;">Click to slide the panel down or up, Add and Delete Rows</div>
    <div id="panel1">
        <br />
        <div id="Addrow">
        <input type="text" id="name" placeholder="Name" style="height: 23px;" />
        <input type="text" id="email" placeholder="Email Address" style="height: 23px;" />
        <input type="text" id="contactNo" placeholder="Contact Number" maxlength="10" style="height: 23px;" />
        <input type="text" id="address" placeholder="Address" style="height: 23px;" />
      Date of Birth :<input type="text" id="txtAge"  onblur="CalculateAge(this)" />(mm/dd/yyyy)
        <span style="color: Red">
        <asp:Label ID="lblError" runat="server"></asp:Label></span>
        Age&nbsp;&nbsp;&nbsp; : <span id="lblAge"></span>
        <input type="button" class="add-row" value="Add Row" style="height: 28px; width: 106px;"/>
    <br /><br />
    <table>
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Email</th>
                <th>Contact Number</th>
                <th>Address</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="record" /></td>
                <td>Peter Parker</td>
                <td>[email protected]</td>
                <td>9874563210</td>
                <td>Delhi India</td>
            </tr>
        </tbody>
    </table>
    <br />
    <button type="button" class="delete-row" style="height: 28px; width: 106px;">Delete Row</button>
    </div>
</div>

Step 2 - Add Jquery Library file into Design page in Head Section. Jquery link is below

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Step 3 - Create Add function using JQuery. Function is below

$(".add-row").click(function () {
    debugger;
    var name = $("#name").val();
    var email = $("#email").val();
    var contactNo = $("#contactNo").val();
    var address = $("#address").val();
     if ($("#name").val() == "")
    {
        alert('Please Enter Name.');
        return false;
    }

    else if ($("#email").val()=="")
    {
        alert('Please Enter email.');
        return false;
    }
    else if ($("#contactNo").val() =="")
    {
        alert('Please Enter contact number');
        return false;
    }
    var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td><td> " + contactNo + "</td><td> " + address + " </td></tr>";
    $("table tbody").append(markup);
});

Step 4 - Create Slider slideToggle function in Jquery.

$("#flip").click(function () {
    $("#panel").slideToggle("slow");
});

$("#flip1").click(function () {
    $("#panel1").slideToggle("slow");
});

$("#myInput").on("keyup", function () {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function () {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
});

Step 5 - Add CSS for designing

<style>
    a.btn {
      color: #fff;
      background: #FF0066;
      padding: .5rem 1rem;
      display: inline-block;
      border-radius: 4px;
      transition-duration: .25s;
      border: none;
      font-size: 14px;
    }
    a.btn:hover {
      background: #22272a;
    }

    #panel, #flip {
      padding: 5px;
      text-align: center;
      background-color: #e5eecc;
      border: solid 1px #c3c3c3;
    }
    #panel1, #flip1 {
      padding: 5px;
      text-align: center;
      background-color: #e5eecc;
      border: solid 1px #c3c3c3;
    }
    #panel {
      padding: 50px;
      display: none;
    }

    #panel1 {
      padding: 50px;
      display: none;
    }

    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }

    td, th {
      border: 3px solid #3a3434;
      text-align: left;
      padding: 8px;
    }

     tr:nth-child(even) {
       background-color: #dddddd;
     }

    .fortextbox {
        width: 227px;
        height: 25px;
        border-radius: 5px;
    }
</style>

Output