Still learning JavaScript and I can't seem to figure out why my firstInput is doubling after doing a second number. Example, '1+' shows fine in the results screen, but when I click the secondInput to '2' hoping it comes out to 1+2, it instead shows me 112+2. Tried putting it into a stored input after making first input but still can't figure this out. Here is my code
https://codepen.io/Kaytin143/pen/bGRjQqx
let firstInput = '';
let storedInput = '';
let secondInput = '';
let currentOp = '';
const results_div = document.querySelector('.screen')
const numberBtns = document.querySelectorAll('.numbers')
numberBtns.forEach((numbers) => {
numbers.addEventListener('click', () => {
firstInput += numbers.value;
storedInput += firstInput;
results_div.innerHTML = firstInput;
numberBtns.forEach((numbers) => {
numbers.addEventListener('click', () => {
secondInput += numbers.value;
results_div.innerHTML = storedInput + currentOp + secondInput;
})
})
//second Input
})
})
// listeners for operators //
const operatorBtns = document.querySelectorAll('.operator');
const clearBtn = document.querySelector('.c');
operatorBtns.forEach((operators) => {
operators.addEventListener('click', () => {
currentOp += operators.value;
results_div.innerHTML = firstInput + currentOp;
})
})