JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<table class="table table-striped" id="maintable">
   <thead>
       <tr>
          <th>Game Code#</th>                                                 
          <th>Description</th>
          <th>Subtotal</th>
          <th></th>
       </tr>
   </thead>
   <tbody>
      <tr>
          <td>CHT01</td>
          <td>2. Haricane Women</td>
          <td>LKR. 500.00</td>
          <td style="float: right">
             <button type="button" class="btn btn-secondary btn-sm waves-effect waves-light" data-toggle="modal" data-target="#formemodal"><i class="fa fa-edit"></i> Edit</button>
             <button type="button" class="btn btn btn-sm waves-effect waves-light delete"><i class="fa fa-bitbucket" ></i> Delete</button>
             </td>
         </tr>
         </tbody>

JavaScript

function SomeDeleteRowFunction(table,child) { 
                table.find(child).remove();
    // you can also play with table and child (child is tr)
      }
          $(".delete").click(function(){

             
            

         

      });
      $("#addnewrecord").click(function () { 

        $("#maintable").each(function () {

            var tds = '<tr>';
            jQuery.each($('tr:last td', this), function () {
                tds += '<td>' + $('#inputGroupSelect01code option:selected').text(); + '</td>';
                tds += '<td>' + $('#inputGroupSelect01dscr option:selected').text(); + '</td>';
                tds += '<td> LKR.' + $('#bidprice').val(); + '</td>';
                tds += '<td style="float: right"> <button type="button" class="btn btn-secondary btn-sm waves-effect waves-light" data-toggle="modal" data-target="#formemodal"><i class="fa fa-edit"></i> Edit</button> <button type="button" class="btn btn btn-sm waves-effect waves-light delete"><i class="fa fa-bitbucket" ></i> Delete</button>  </td>';
            })
            tds += '</tr>';
            if ($('tbody', this).length > 0) {
                $('tbody', this).append(tds);
            } else {
                $(this).append(tds);
            }
        });
    });