JSFiddle - React, Tailwind, and code Playground

by shahrukh007

HTML

<html>
 <body>
  <form onsubmit="myFunction(event);">
   <input type="text" id = "txt" required >
    <button type="submit" id="btn">Submit</button>
  </form>
  <div id = "list"></div>
  <script>
   var elements_array=[];
   var edit_type = false;
   var edit_id = "";
   //document.addEventListener("DOMContentLoaded", myFunction());
   function myFunction(e){
   e.preventDefault(e);
   if(!edit_type){
   var inputValue = $('#txt').val();
   $('#txt').val("");
   $('#list').html("");
    if (localStorage.getItem("key") !== null) {
    elements_array= JSON.parse(localStorage.getItem('key'));
    }
   else {
   elements_array = [];
   } 
   elements_array.push(inputValue);
   localStorage.setItem("key",JSON.stringify(elements_array));
  // console.log(elements_array);
    for(var i =0; i<elements_array.length; i++){
     $("#list").append("<p id='id_"+i+"'><input  type='checkbox' class ='mycheck' onchange='check("+i+",event)'/> <span id='update_"+i+"'>"+elements_array[i]+"</span><input type='button' value='Delete' id='deleteBtn_"+i+"' class='btnClass' onclick='removeItem("+i+",event)'/><input type='button' value='Edit'id='updateBtn_"+i+"' class='btnClass' onclick='editItem("+i+",event)'/></p>");
    }
  }
    else{
     var input_txt = $('#txt').val();
     $("#update_"+edit_id).text(input_txt);
     $('#txt').val("");
     edit_type=false;
     $('.mycheck').prop('checked', false);
     $('#deleteBtn_'+edit_id).css("display", "none");
     $('#updateBtn_'+edit_id).css("display", "none");
     $("#update_"+edit_id).css("text-decoration", "none");
     elements_array.splice(edit_id,1,input_txt);
     var y = JSON.parse(localStorage.getItem("key"));
     y.splice(edit_id,1,input_txt);
     localStorage.setItem('key', JSON.stringify(y));
     $("#btn").html('Submit'); 
   }
  }
   function check(id,e){
    if(e.target.checked==true){
     $('#deleteBtn_'+id).css("display", "block");
     $('#updateBtn_'+id).css("display", "block");
    ...

CSS

.btnClass{
  display: none;
}