JSFiddle - React, Tailwind, and code Playground

by S.M. Murad Hasan Tanvir

HTML

<div id="copyPhone" style="display:none">
    <table class="table table-border" style="margin-bottom: 0px !important;" data-id="">
        <tr>
            <td>Phone<span class="required">*</span></td>
            <td><input name="phone" data="phone" type="text" class="form-control cngVal"></td>
        </tr>
        <tr>
            <td>Phone Type</td>
            <td>
                <select name="phone_type" class="form-control cngVal">
                    <option value="0"> - Select - </option>
                    <option value="Mobile">Mobile</option>
                    <option value="Office">Office</option>
                    <option value="Home">Home</option>
                    <option value="Other">Other</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Phone Notification</td>
            <td align="left">
                <input type="radio" name="phone_notification" value="Yes" placeholder="" class="cngVal"> Yes&nbsp;&nbsp;
                <input type="radio" selected name="phone_notification" value="No" placeholder="" class=" cngVal"> No                                        
            </td>
        </tr>
    </table>
</div>
<table class="table table-bordered">
<tr>
    <td colspan="2" style="margin: 0px; padding: 0px">
    </td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td><span class="add" style="background-color:#DEDEDE; padding:5px; cursor:pointer;">Add Another Phone</span</td>
</tr>
 </table>

JavaScript

var conNum = 1;
$(".add").on('click', function(){		
	conNum++;	
    var getContent = $("#copyPhone").html();
    
    var a =$("#copyPhone");
    a.find('.cngVal').each(function(){
    	$(this).attr("name", $(this).attr('data')+'_'+conNum+'[]');
    });
    a = a.html();
    $(this).closest('tr').prev().find("td:first").append(a);
    $(this).closest('tr').prev().find("td:first table:nth-child("+ conNum +") ").attr('data-id', conNum);
});