JSFiddle - React, Tailwind, and code Playground

by jkeyes

HTML

<form method="post" action="">

    <table width="100%">
    <tr>
       <td>
        <div id="Education">
                   <table class="Studentprofile" id="tblEducation">
                        <tr>
                            <td colspan="2"><br/> Education Details</td>
                        </tr>
                        <tr id="schoolRow" name="schoolRow">
                            <td class="studentprofileupdateHead" >
                                <label for="schools">Schools:</label>
                            </td>
                            <td class="studentprofileupdateBody" id="schools">
                                <input type="text" id="s1" name="s1" title="S1"></input>
                                <select name="selSYear">
                                    <option value="0">-Select-</option>
                                    <option value="1">2010</option>
                                    <option value="2">2009</option>
                                    <option value="3">2008</option>
                                    <option value="4">2007</option>
                                    <option value="5">2006</option>
                                    <option value="6">2005</option>
                                    <option value="7">2004</option>
                                    <option value="8">2001</option>
                                    <option value="8">2000</option>
                                <//select>
                            </td>
                            <td class="deleteEl">
                                <a href="#">Delete</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="studentprofileupdateHead" >
                            </td>
                            <td class="studentprofileupdateBody">
                                <a href="#">Add Schools</a>
                            </td>
             ...

JavaScript

$(document).ready(function () {
    var dynamicId, inputName, numberEachType;
    $('.studentprofileupdateBody a').click(function () {
        
        console.log('ok');
        var $tr = $(this).closest('tr').prev();
        numberEachType = $('table#tblEducation tr[name="'+$tr.attr('name')+'"]').length;
        dynamicId = $tr.attr('name') + numberEachType;
        var clone = $tr.clone().attr('id',dynamicId); //dynamic ID at <tr>
        inputName = clone.find('input').attr('name');
        dynamicId = inputName.substring(0,inputName.length-1) + (numberEachType+1);
        clone.find('input').attr('id',dynamicId).attr('name',dynamicId).attr('title',dynamicId.toUpperCase()); //dynamic ID, Name and title at <input>
        $tr.after(clone);
    });
    
    $("#Education").delegate(".deleteEl a", "click", function(){
            $(this).parent().parent().remove();
    });
    
});