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>