Saving user input from Popup in local storage not working properly - leaflet

Question

i have a marker with pop i was able to save user input from a form in my popup but the problem is it will only save if i have to click somewhere on the map first. heres my code...
L.marker([63.233627, 5.625])
.addTo(map)
.bindPopup('<form><select class="fodd" id="fodd-1"><option value="false">false</option><option
value="true">true</option></select><button type="button" id="btnInsert">Save</button></form>')
.on('click', foddStatus);
L.marker([72.181804, 45])
.addTo(map)
.bindPopup('<form><select class="fodd" id="fodd-2"><option value="false">false</option><option
value="true">true</option></select><button type="button" id="btnInsert">Save</button></form>')
.on('click', foddStatus);
function foddStatus(e) {
var btnInsert = document.getElementById("btnInsert");
btnInsert.onclick = function () {
// get user input when button is saved is clicked
var foddValue = document.querySelector('.fodd').value;
var foddLoc = document.querySelector('.fodd').id;
var midFodd = ":";
var var1 = foddLoc + midFodd;
var new_data = foddLoc + midFodd + foddValue;
console.log(new_data);
// if there is nothing saved on storage then save an empty array
if (localStorage.getItem('foddstatus') == null){
localStorage.setItem('foddstatus','[]');
}
// get old data and slap it to the new data
var old_data = JSON.parse(localStorage.getItem('foddstatus'));
old_data.push(new_data);
// save the old + new data to local storage
localStorage.setItem('foddstatus', JSON.stringify(old_data));
// console.log(key);
}
}
so what happens here on the first marker that I click the save button, it will save the values in localstorage, then when I go to the second marker and click the save button, it won't actually save on local storage. I have to click somewhere else on the map first in order to save the second marker's input on my localstorage.

Answer 1

this is a bit other approach to achive your goal, but maybe it helps.
This is only a test, without any validation etc. so please be aware of it!
I used here simple divs in the popups, inside an input and a button. Every button has its onclick attribute to call storeData function, which sets the localStorage key-value if the input is not empty. I used the input ids as keys.
The example snippet:
let ls = window.localStorage;
var map = L.map('map').setView([41, 21], 5);
var darkMap = L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png', {
maxZoom: 20,
attribution: '© Stadia Maps, © OpenMapTiles © OpenStreetMap contributors'
}).addTo(map);
var marker1 = L.marker([40, 10]).addTo(map);
var marker2 = L.marker([40, 30]).addTo(map);
marker1.bindPopup('<div><input class="ipt" id="ipt1" /><button onclick="storeData(this);" class="save">SAVE</button></div>');
marker2.bindPopup('<div><input class="ipt" id="ipt2" /><button onclick="storeData(this);" class="save">SAVE</button></div>');
function storeData(btn) {
let ipt = btn.parentNode.querySelector('.ipt');
if (ipt.value != '') {
ls.setItem(ipt.id, ipt.value);
let str = 'Data stored in localStorage with key: ' + ipt.id + ', value: ' + ls.getItem(ipt.id);
alert(str);
} else {
console.log('Empty input!');
}
}
And a working fiddle (Please open in non-incognito).