JSFiddle - React, Tailwind, and code Playground

by Alex197

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<div class="container mt-2">
    <form>
      <div class="row">
        <div class="col-4">
            <input type="text" id="name" placeholder="Name" class="form-control" required>
        </div>
        <div class="col-4">
            <input type="text" id="email" placeholder="Email Address"  class="form-control" required>
        </div>
        <div class="col-4">
          <button type="button" class="add-row btn btn-success"> ADD </button>
        </div>
      </div>
    </form>
    <br>
    <br>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
          <tr>
            <td>One 1</td>
            <td>One 1</td>
            <td><button type="button" class="delete-row">Delete Row</button></td>
          </tr>
          <tr>
            <td>Two 2</td>
            <td>Two 2</td>
            <td><button type="button" class="delete-row">Delete Row</button></td>
          </tr>
          <tr>
        </tbody>
    </table>
   </div>

JavaScript

$(document).ready(function(){
  $(document).on('click', ".add-row", function(){
    var name    = $("#name").val();
    var email   = $("#email").val();
    var markup  = `
      <tr>
      <td>`+name+`</td>
      <td>`+email+`</td>
      <td>
      <button type="button" class="delete-row">Delete Row</button>
      </td>
      </tr>
      `;

    //VALIDATION
    if(name && email){
      $("table tbody").append(markup);
      $('.req').remove();
    }else{
      $('.req').remove();
    }

    //REQUIRED
    if(!name){
      $('#name').after(`
        <div class="req">
        <small class="text-secondary text-danger" style="font-size: 10px;"> 
        <i>* Nama Tidak Boleh Kosong</i>
        </small>
        </div>
        `);
    }

    if(!email){
      $('#email').after(`
        <div class="req">
        <small class="text-secondary text-danger" style="font-size: 10px;"> 
        <i>* Nama Tidak Boleh Kosong</i>
        </small>
        </div>
        `);
    }
  });
        
  $(document).on('click', ".delete-row", function(){
    $(this).parents("tr").remove();
  });
});