JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" id="ClearLSBtn">clear localStorage </button>
<fieldset>

<legend>FavoriteCricketPlayers</legend>

<div>
<label for="Name">Name:</label>
<input type="text"id="Name"name="Name"/>
</div>

<div>
<label for="Team Color">Team Color:</label>
<input type="text"id="Team Color"name="Team Color"/>
</div>

<div>
<label for="Country">Country:</label>
<input type="text"id="Country"name="Country"/>
</div>

<div>
<label for="Type of Player"> Type of Player:</label>
<input type="text"id="Type of Player" name="Type of Player"/>
</div>

<button type="button"id="saveBtn">Save</button>



<div id="output"></div>

</fieldset>

CSS

fieldset{
    width:200px;
}
.CricketPlayers{
    border:1px dotted green;
    width:100px;
}
.hide{
    display:none;
}

JavaScript

var nameEl=document.getElementById("name");
var teamcolorEl=document.getElementById("teamcolor");
var countryEl=document.getElementById("country");
var typeofplayersEl=document.getElementById("typeofplayers");
var saveEl=document.getElementById("saveBtn");
var clearEl=document.getElementById("clearLSBtn");

console.log(window.localStorage);

var data=[];

var favoritecricketplayers = function(name,teamcolor,country,typeofplayers)
{
    this.name=name;
    this.teamcolor=teamcolor;
    this.country=country;
    this.typeofplayers=typeofplayers;
};
favoritecricketplayers.prototype.createDiv = function() {
    
            var div=document.createElement("div");
            div.style.backgroundcolor=green;
            var nameNode=document.createTextNode(this.name);
            div.appendChild(nameNode);
            return(div);
}    

    var getData=function() {
    var name=nameEl.value;
    var teamcolor=teamcolorEl.value;
    var country=countryEl.value;
    var typeofplayers=typeofplayersEl.value;
    var favoritecricketplayers = new favoritecricketplayers(name,teamcolor,country,typeofplayers);

    data.push(favoritecricketplayers);
    updateOutput();
    updateLs();
    clearInputs();
};
clearEl.onclick=function() {
    window.localStorage.clear();
}
var onReturnHandler=function(event) {
    if(event.keyCode==13) {
        getData();
    }
};
saveEl.onclick=getData;
nameEl.onkeyup=onReturnHandler;
teamcolorEl.onkeyup=onReturnHandler;
countryEl.onkeyup=onReturnHandler;
typeofplayer.onkeyup=onReturnHanlder;
    
    
    
    var updateLS=function() {
        window.localStorage.setItem("favoritecricketplayers",JSON.stringify(data));
    }
    var initLS=function() {
        data=JSON.parse(window.localStorage.getItem("favoritecricketplayers"));
        for(i in dataLS) {
            var obj=dataLs[i];
            var favoritecricketplayer= new favoritecricketplayer(obj.name,obj.teamcolor,obj.country,obj.typeofplayers);
           ...