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 = "";
  function myFunction(e){
  e.preventDefault(e);
  if(!edit_type){
  var inputValue = $('#txt').val();
  $('#txt').val("");
  if (localStorage.getItem("key") !== null) {
  //console.log(localStorage.getItem('key'))
    elements_array= JSON.parse(localStorage.getItem('key'));
   // console.log(elements_array);
    }
   else {
   elements_array = [];
   } 
  elements_array.push({name:inputValue});
  //console.log(elements_array);  
  localStorage.setItem("key",JSON.stringify(elements_array));
  var string="";
  for (var i=0; i<elements_array.length;i++){
 // console.log(JSON.parse(localStorage.getItem('key')));
  var p="<li id='id_"+i+"'><input type='checkbox' class ='mycheck' onchange='check("+i+",event)'/> <span id='update_"+i+"'>"+inputValue+"</span><input type='button' value='Delete' id='deleteBtn_"+i+"' class='btnClass' onclick='removeItem("+i+",event)'/><input type='button' value='Update'id='updateBtn_"+i+"' class='btnClass' onclick='updateItem("+i+",event)'/></li>";   
  }
  string += p;
  $('#ul').append(string);
  }
  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");
   /* var x = JSON.parse(localStorage.elements_array);
   for (var i = 0; i < x; i++) {
   if(name === elements_array[i].name){  //look for match with name
       elements_array[i].name =input_txt;  //add two
       break;  //exit loop since you found the person
   }
   }
   localStorage.setItem("persons", JSON.stringify(persons));  */
  
  }
 }
  function...