JSFiddle - React, Tailwind, and code Playground

by Olayinka Otuniyi

HTML

<div id="inputs">
  <select id="index" name="index">
  <option hidden="">Index</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
  <input placeholder="Name" type="text" id="name" />
  <input placeholder="Surname" type="text" id="surname" />
  <input placeholder="Years" type="text" id="years" />
  <input type="button" onclick="window.run.prototype.remove()" value="Delete" />
  <input type="button" onclick="window.run.prototype.addTo()" value="Add" />
</div>

JavaScript

function remove() {
	var arr = [];
	var obj = {
		'index': document.getElementById("index").value
	};
	for (var i = arr.length - 1; i >= 0; i--) {
		if (arr[i]['index'] === obj['index']) {
			arr.splice(i, 1);
		}
	}
	localStorage.removeItem("user", JSON.stringify(arr));
	//console.log(arr);
}

function addTo() {
		var arr = [];
		var obj = {
			'index': document.getElementById("index").value,
			'name': document.getElementById("name").value,
			'surname': document.getElementById("surname").value,
			'years': document.getElementById("years").value
		};

		if (!arr.some(e => e['index'] == obj['index'])) {

			arr.push(obj);
		} else {
			arr[arr.map((e, i) => [i, e]).filter(e => e[1]['index'] == obj['index'])[0][0]] = obj;
		}
		this.appendLocalStorage("user", JSON.stringify(arr));
		alert(localStorage.getItem("user"));
   }

function appendLocalStorage(keys, data) {
		var old = localStorage.getItem(name);
		if (old === null) old = "";
		localStorage.setItem(name, old + data);
}