JSFiddle - React, Tailwind, and code Playground

by Joe Saad

HTML

<table class="con-t" border="1" width="95%">
<thead>
<tr><th>Meter Type</th>
<th>ESID Number</th>
<th>Street Name</th>
<th>Zip Code</th>
<th>Service Start Date</th>
<th></th>
</tr></thead>
<tbody>
<tr>
<td><select class="at"><option>Temporary</option><option>Permanent</option></select></td>
<td>100890-<input type="text" /><br /><a href="#" class="findA">Find Address by ESID</a> | <a href="#" class="submitA">Submit</a></td>
<td><input type="text" class="at nt" /></td>
<td><input type="text" class="at nt" /></td>
<td><input type="text" class="at nt" /></td>
<td><a href="#" class="at nt remove" onclick="removeIt()">remove</a></td>
</tr>
</tbody>
</table>
<a href="#" id="addSNeter">Add New Service Meter Address</a>

CSS

.con-t td{padding-top:10px;font-size:13px;text-align:center;}
.con-t td .at {margin-bottom:15px;}
.nt {visibility:hidden;}
#addSNeter {display:none;}

JavaScript

$(function(){
    $('.findA').click(function(){
       $(this).parent().children('input').attr('disabled','disabled');
       $('input,a').removeClass('nt');
    });
    $('.submitA').click(function(){
       $('input,a').removeClass('nt');
    });
    
    
    $('tr:last input').blur(function(){
        var vald= false;
        $('tr:last input').each(function(){
           if ($(this).val()=="") {
              vald = true;
           }       
        });
        if (vald == false) {
           $('#addSNeter').show();
        }        
    });
    
    $('#addSNeter').click(function(){
        if ($('tr:last td input.at').val()!="") {
          $('tr:last').clone().insertBefore('tbody tr:first');
          $('tr:last td input').val("");
            $('tr:last td input').removeAttr('disabled');
            $(this).hide();
            for (i=3; i<=5; i++) {
                $('tr:last td:nth-child('+i+') input').addClass('nt');
            }
        }
    });
    
    $('.remove').click(function(){
        var currentTR = $(this).parents('tr');
        if ((currentTR.is(':last-child'))){
           alert(' last child');
        }
        else {
           alert('not last child');
        }
        alert(currentTR.html());
        
        if ($(this).parents('tr').is(':last-child')) {           //$(this).parents('tr').children('input.at').css('visibility','hidden');            
        alert('last row');                                                           
        }
        else {
           //$(this).parents('tr').remove();        
           alert('not last row');
        }
        
    });


});