JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <label>Name</label>
    <input type="text" id="nameEdit">
      <label>Number</label>
     <input type="number" id="numberEdit">
        <button id="addItem">Add</button>
    <ul id="phonelist">
        
    </ul>
    
</div>

JavaScript

function Phonebook(){
    this.phoneBookArray=[];
    var defaultvalue= [{name:"abc",phonenumber:989123},{name:"pqr",phonenumber:9891462}]
    this.phoneBookArray=defaultvalue;
    console.log(this.phoneBookArray)
   }
Phonebook.prototype.addItem=function(username,phoneNumber){
    this.phoneBookArray.push({name:username,phonenumber:phoneNumber})
    this.displayItem();
}

Phonebook.prototype.displayItem=function(){
    $("#phonelist").html('');
    for(var i=0;i<this.phoneBookArray.length;i++){
        $("#phonelist").append('<li><span>'+this.phoneBookArray[i].name+'</span><span>'+       this.phoneBookArray[i].phonenumber+'</span><span><button class="del">delete</button></span><span><button class="update">update</button></span></li>')
    }
}

var phonedir=new Phonebook();
phonedir.displayItem();
$('#addItem').click(function(){
    
    var name=$('#nameEdit').val();
     var phone=$('#numberEdit').val();
   
    if(name!=''&& phone!=""){
       phonedir.addItem(name,phone);
        $('#nameEdit').val('');
        $('#numberEdit').val('');
    }else{
     alert('please enter number and name')   
    }
  
})


$('.del').click(function(){
    //try to delete item from list as well as from phoneBookArray
   console.log($(this).parent('li'))
  
})

$('.update').click(function(){
    //try to update item from list as well as from phoneBookArray
    
    // try to get selected item and fill on text field and update the list
   //console.log($(this).parent('li'))
  
})