One function for multiple "plus" and "minus" buttons that create and delete inputs

Question

Hi I'm trying to make a "plus" button that when clicked create an input and a "minus" button that when clicked deletes the last input. Because I want to use the same function to do the same thing with multiple "lines", I tried to add the name of the variable "count" in the parameter of the function. This is what seems to make the snippet bug but I can't figure out how to make it work.

let count1 = 0;
let count2 = 0;
function newX(x, y){
    y++;
    let inputsContainer = document.getElementById(x);
    let newInput = document.createElement("input");
    newInput.type = "text"; newInput.id = x+y;
    inputsContainer.appendChild(newInput);
}
function deleteX(x, y){
    document.getElementById(x).lastChild.remove();
    y--;
}
function result(){
  document.getElementById('result').innerText = document.getElementById('AAA-').innerHTML + document.getElementById('BBB-').innerHTML
}

<h2>Test 1</h2>
<div style="display : flex;">
  <div>
    <button onclick="newX('AAA-', count1)">+</button>
    <button onclick="deleteX('AAA-', count1)" style="margin-right:5px;">-</button>
  </div>
  <div id="AAA-">
    <input type="text" id="AAA-0">
  </div>
</div>
<h2>Test 2</h2>
<div style="display : flex;">
  <div>
    <button onclick="newX('BBB-', count2)">+</button>
    <button onclick="deleteX('BBB-', count2)" style="margin-right:5px;">-</button>
  </div>
  <div id="BBB-">
    <input type="text" id="BBB-0">
  </div>
</div>
<h2>Name of the new ids</h2>
<button onclick=result()>Show</button>
<div id="result"></div>

Answer 1

Finally I found the solution :

function newX(x){
      var div = document.getElementById(x);
      var inputs = div.querySelectorAll("input");
      let numInputs = inputs.length;
    let inputsContainer = document.getElementById(x);
    let newInput = document.createElement("input");
    newInput.type = "text"; newInput.id = x+numInputs;
    inputsContainer.appendChild(newInput);
}
function deleteX(x){
    document.getElementById(x).lastChild.remove();
}
function result(){
  document.getElementById('result').innerText = document.getElementById('AAA-').innerHTML + document.getElementById('BBB-').innerHTML
}

<h2>Test 1</h2>
<div style="display : flex;">
  <div>
    <button onclick="newX('AAA-')">+</button>
    <button onclick="deleteX('AAA-')" style="margin-right:5px;">-</button>
  </div>
  <div id="AAA-">
    <input type="text" id="AAA-0">
  </div>
</div>
<h2>Test 2</h2>
<div style="display : flex;">
  <div>
    <button onclick="newX('BBB-')">+</button>
    <button onclick="deleteX('BBB-')" style="margin-right:5px;">-</button>
  </div>
  <div id="BBB-">
    <input type="text" id="BBB-0">
  </div>
</div>
<h2>Name of the new ids</h2>
<button onclick=result()>Show</button>
<div id="result"></div>

Answer 2

The issue you made is your function to create the elements that has the same id while creating the new input. You can remove the last element by using parentDom.lastchild.remove(). Please check my code.

function deleteX(x, y){
    let lastInputName = x+y;
    let lastInput = document.getElementById(lastInputName);
    document.getElementById(x).lastChild.remove();
    y--;
}