My issue is that the addEventListener function is only working for the 'scroll' event and not for 'addMoreFields' or 'removeFields'. If I move the scroll section down, then it works for 'addMoreFields' and 'removeFields', but no longer works for 'scroll'.
const wraping = document.querySelector('#Wraping');
const addMoreFields = document.querySelector('#btn-add');
const removeFields = document.querySelector('#btn-remove');
let inpName = 0;
const scroll = document.querySelector(".scrollToTop");
scroll.addEventListener("click", function(){
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
});
addMoreFields.addEventListener("click", function(){
let input_tags = wraping.getElementsByTagName('input');
if (input_tags.length < 10){
inpName = inpName + 1;
let newField = document.createElement('input');
newField.setAttribute('type','text');
newField.setAttribute('name','products[' + inpName + ']');
newField.setAttribute('class','spacing form-control');
newField.setAttribute('placeholder','Enter product URL_' + (inpName + 1));
wraping.appendChild(newField);
}
});
removeFields.addEventListener("click", function(){
let input_tags = wraping.getElementsByTagName('input');
if(input_tags.length > 1){
wraping.removeChild(input_tags[(input_tags.length - 1)])
inpName = inpName - 1;
}
});
HTML
<div class="mb-3">
<label class="form-label">Monetization</label>
<div id="Wraping">
<input class="spacing form-control" placeholder="Past product URL" type="text" name="products[]">
</div>
<button id="btn-add" class="c-button compose-btn btn " type="button" name="add">Add</button>
<button id="btn-remove" class="c-button compose-btn btn " type="button" name="remove">Remove</button>
</div>