JSFiddle - React, Tailwind, and code Playground

HTML

key1<input type="text" class="key" id="key1" value="a"/>
value1<input type="text" class="val"  id="value1" value="1" />
key2<input type="text" class="key"  id="key2" value="b"/>
value2<input type="text" class="val" id="value2" value="2"/>
</br>
</br>
<button id="link1">push</button>
<button id="link2">pull</button>

<p id="stuff">

</p>

JavaScript

var datas = new Array;
if (navigator.appName !== 'Microsoft Internet Explorer'){
    var qsVal = document.getElementsByClassName("val");
}
else{
    var qsVal = document.querySelectorAll('.val');
}
if (navigator.appName !== 'Microsoft Internet Explorer'){
    var qsKey = document.getElementsByClassName("key");
}
else{
    var qsKey = document.querySelectorAll('.key');
}
var storedPlays;
var stuff = document.getElementById("stuff");
$(document).ready(function(){
    $("#link1").click(pushArray);$("#link2").click(showStuff);

});
function pushArray(){
    for (var i=0, len = qsVal.length; i < len; i++){
    thisValue = qsVal[i].value;
    thisKey = qsKey[i].value;
    datas.push([thisValue,thisKey]);
    localStorage.setItem('datas', JSON.stringify(datas));
    }
}

function showStuff(){
    storedPlays    = JSON.parse(localStorage.getItem('datas'));
console.log(storedPlays);
}