JSFiddle - React, Tailwind, and code Playground

by PatrickHume

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>CRUD Table jQuery</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12 text-right">
          <input type="button" id="btnAdd" class="btn btn-primary para" value="Add New" />
        </div>
      </div>

      <div class="row pt-3">
        <div class="col-md-12 col-sm-12 col-12 p-2 ">
          <table id="tblData" class="table table-bordered table-hover table-striped">
            <thead>
              <tr id="headings">
                <th class="schedule-color heading">ID</th>
                <th class="schedule-color heading">Name</th>
                <th class="schedule-color heading">Address</th>
                <th class="schedule-color heading">Age</th>
                <th class="tdaction">Action</th>
              </tr>
            </thead>
            <tbody class="searchable">
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </body>

</html>

JavaScript

$(function() {
       let myEmptyRow = []
       let myButtons = {};

       function getNewButtons() {
         myButtons = {
           edit: [
             $("<button>", {
               class: "btn btn-success btn-sm btn-edit"
             }).html("Edit"),
             $("<button>", {
               class: "btn btn-danger btn-sm"
             }).html("Delete")
           ],
           update: [
             $("<button>", {
               class: "btn btn-success btn-sm btn-save"
             }).html("Update"),
             $("<button>", {
               class: "btn btn-danger btn-sm"
             }).html("Delete")
           ]
         }
       }

       function getNewEmptyRow() {
         myEmptyRow = [{
           class: "tdID",
           content: $("<input>", {
             type: "text",
             class: "form-control txtID"
           })
         }, {
           class: "tdName",
           content: $("<input>", {
             type: "text",
             class: "form-control txtName"
           })
         }, {
           class: "tdAddress",
           content: $("<input>", {
             type: "text",
             class: "form-control txtAddress"
           })
         }, {
           class: "tdAge",
           content: $("<input>", {
             type: "text",
             class: "form-control txtAge"
           })
         }, {
           class: "tdAction",
           content: [
             $("<button>", {
               class: "btn btn-sm btn-success btn-save"
             }).html("Save"),
             $("<button>", {
               class: "btn btn-sm btn-success btn-cancel"
             }).html("Delete")
           ]
         }]
       }

       function getStore(index) {
         console.log("Get data for " + index);
         return JSON.parse(localStorage.getItem(index));
       }

       function saveStore(index, data) {
         console.log("Saving Data to " + index) //, data);
         localStorage.setItem(index, JSON.stringify(data));
      ...