JSFiddle - React, Tailwind, and code Playground

by M Shameer

HTML

<input type='hidden' id='rowcount' value='1'/>

<table id='maintable'>
<thead>
    <tr>
        <th>Delete</th>
        <th colspan='2'>Yes/No</th>
        <th>Description</th>
        <th>Text</th>
    </tr>
</thead>
<tbody>
 <tr id='row1'>
     <td><img src='http://b.dryicons.com/images/icon_sets/colorful_stickers_icons_set/png/256x256/delete.png' width='20px' class='deletethisrow' data-val='1'/></td> 
     <td><label for='radYes1'>Yes</label><input type='radio' name='yesno1' class='arad' value='Yes' id='radYes1' checked='checked'/></td>
     <td><label for='radNo1'>No</label><input type='radio' name='yesno1' class='arad' value='No' id='radNo1'/></td>
     <input type='hidden' id='hidradval1' value='Yes'/>
     <td><input type='text' id='row1text1' size='10' name='txt1' value='text1'/></td>
     <td><input type='text' id='row1text2' size='5' name='txt2' value='abc1'/></td>
 </tr>
</tbody>
</table><br/><br/>
<button id='addnewrow'>Add New Row</button><button id='rowcountnow'>Row Count is?</button><br/><br/><br/>
<button id='showdata'>Show me data</button><button id='clickme'>Click</button>
<br/><br/>
<div id='thedata'>
</div>

CSS

table, table tr td {
    text-align:center;
}

table, table tr th{
    border:1px solid black;
    border-collapse:collapse;
    padding:0.5em;
}

img {
    
}


table tr td:first-child {
    padding-right:1em;
}

table tr td:nth-child(2) {
    padding-right:0.5em;
}

table tr td input[type='text']{
    margin-left:2em;
}

JavaScript

$(document).ready(function() {
    
    //Adds a new row
    $(document).on('click','#addnewrow', function() {
       var rowcount = $('#rowcount').val();
       var newcount = parseInt(rowcount) + (1*1);
        var imgsrc ="http://b.dryicons.com/images/icon_sets/colorful_stickers_icons_set/png/256x256/delete.png";
        $('#rowcount').val(newcount);
       var x1="<tr id='row" + newcount + "'>";
        var x2="<td><img src="+imgsrc+" width='20px' class='deletethisrow' data-val='" + newcount + "'/></td>";
        
        var x3="<td><label for='radYes"+newcount+"'>Yes</label><input type='radio' name='yesno"+newcount+"' class='arad' value='Yes' id='radYes"+newcount+"' checked='checked'/></td>";
        var x3a ="<input type='hidden' id='hidradval" + newcount + "' value='Yes'/>";
        var x4="<td><label for='radNo"+newcount+"'>No</label><input type='radio' name='yesno"+newcount+"' class='arad' value='No' id='radNo"+newcount+"'/></td>";
        
        var x5="<td><input type='text' id='row"+newcount+"text1' size='10' name='row"+newcount+"text2' value='text"+newcount+"'/></td>";
        
        var x6="<td><input type='text' id='row"+newcount+"text2' size='5' name='row"+newcount+"text2' value='abc"+newcount+"'/></td></tr>";
        
        var newrow = x1 + x2 + x3 + x3a + x4 + x5 + x6;
        
        $('#maintable tbody').append(newrow);
    });
    
    //Deletes a row
    $('#maintable').on('click','.deletethisrow', function() {
       $(this).parents('tr').remove();       
    });
    
    //Finds the checked radio button and sets a value in a hidden input
    $('#maintable').on('click', '.arad', function() {
       var xid = $(this).attr('id');
        var x = xid.slice(-1);
        $('#hidradval' + x).val($("input[name='yesno" + x + "'][type='radio']:checked").val());                                 
    });
    
    //Determines row count
    $('#rowcountnow').click(function() {
        var cnt = $('#maintable tbody tr').length;
       ...