Problem trying to make a function dinamic, it doesnt read me the function Parameter

Question

I'll post first the original code, wich is pretty hard coded and has a bunch of lines.

So the idea is a Score tracker for a game, so you just write in the input the new points, and click Rest or add depending of the score of every round and it will be added to the player score.

MAIN CODE HTML :

<section id="theGame"class="started-game hide">
       <div class="playing-player">
        <h3 id="p1"></h3>
             <div class=" scoresFather ">
            <p class="p1-score score">0</p>
            <input type="number"  id="newpoint-p1" class="newpoint">
            <input type="button" value="+" id="add-p1" class="add">
            <input type="button" value="-" id="rest-p1" class="rest">
             </div>
       </div>
       <div class="playing-player a">
        <h3 id="p2"></h3>
             <div class=" scoresFather ">
            <p class="p2-score score">0</p>
            <input type="number"  id="newpoint-p2" class="newpoint">
            <input type="button" value="+" id="add-p2" class="add">
            <input type="button" value="-" id="rest-p2" class="rest">
             </div>
       </div>
       <div class="playing-player">
        <h3 id="p3"></h3>
            <div class=" scoresFather hide">
            <p class="p3-score score">0</p>
             <input type="number"  id="newpoint-p3" class="newpoint">
             <input type="button" value="+" id="add-p3" class="add">
             <input type="button" value="-" id="rest-p3" class="rest">
             </div>
       </div>
       <div class="playing-player">
        <h3 id="p4"></h3>
            <div class=" scoresFather hide">
             <p class="p4Score score">0</p>
             <input type="number"   id="newpointP4"class="newpoint">
             <input type="button" value="+" id="add-p4" class="add">
             <input type="button" value="-" id="rest-p4" class="rest">
            </div>
         </div>
       <input type="button" value="Inicio" id="go-home" class="home" onClick="window.location.reload(true)">
    </section>


MAIN CODE JS : 

  //Add points and congrats the winner
 //p1
 p1Add.addEventListener('click', function() { 
    let p1Score = document.querySelector('.p1-score') ;
    let p1NewPoint = document.querySelector('#newpoint-p1') ;
      if(parseInt(p1NewPoint.value)){ 
      p1Score.textContent = parseInt(p1Score.textContent) + parseInt(p1NewPoint.value)
      p1NewPoint.value = '';}
      else {
        p1NewPoint.value = '';};
     changeColor(p1Score)

   });

   p1Rest.addEventListener('click', function() {
    let p1Score = document.querySelector('.p1-score') ;
    let p1NewPoint = document.querySelector('#newpoint-p1') ;
    if(parseInt(p1NewPoint.value)) {
    p1Score.textContent = parseInt(p1Score.textContent) - parseInt(p1NewPoint.value)
    p1NewPoint.value = '';}
    else {
        p1NewPoint.value = '';}
         changeColor(p1Score)

    });

    //P2
    p2Add.addEventListener('click', function() { 
        let p2Score = document.querySelector('.p2-score') ;
        let p2NewPoint = document.querySelector('#newpoint-p2') ;
          if(parseInt(p2NewPoint.value)){ 
          p2Score.textContent = parseInt(p2Score.textContent) + parseInt(p2NewPoint.value)
          p2NewPoint.value = '';} 
        else {
            p2NewPoint.value = '';}
             changeColor(p2Score)

        });
    
       p2Rest.addEventListener('click', function() {
        let p2Score = document.querySelector('.p2-score') ;
        let p2NewPoint = document.querySelector('#newpoint-p2') ;
        if(parseInt(p2NewPoint.value)) {
        p2Score.textContent = parseInt(p2Score.textContent) - parseInt(p2NewPoint.value)
        p2NewPoint.value = ''; }
        else {
            p2NewPoint.value = '';}
             changeColor(p2Score)

        });        
//p3
p3Add.addEventListener('click', function() { 
    let p3Score = document.querySelector('.p3-score') ;
    let p3NewPoint = document.querySelector('#newpoint-p3') ;
      if(parseInt(p3NewPoint.value)){ 
      p3Score.textContent = parseInt(p3Score.textContent) + parseInt(p3NewPoint.value)
      p3NewPoint.value = '';}
      else {
        p3NewPoint.value = '';}
         changeColor(p3Score)

    });    

   p3Rest.addEventListener('click', function() {
    let p3Score = document.querySelector('.p3-score') ;
    let p3NewPoint = document.querySelector('#newpoint-p3') ;
    if(parseInt(p3NewPoint.value)) {
    p3Score.textContent = parseInt(p3Score.textContent) - parseInt(p3NewPoint.value)
    p3NewPoint.value = ''; }
    else {
        p3NewPoint.value = '';}
         changeColor(p3Score)

    });    

  p4Add.addEventListener('click', function() {
    let p4Score = document.querySelector('.p4Score') ;
    let p4NewPoint = document.querySelector('#newpointP4') ;
      if(parseInt(p4NewPoint.value)){ 
      p4Score.textContent = parseInt(p4Score.textContent) + parseInt(p4NewPoint.value)
      p4NewPoint.value = '';}
      else {
        p4NewPoint.value = '';}
         changeColor(p4Score)
        ;
    })

//P4
   p4Rest.addEventListener('click', function() {
    let p4Score = document.querySelector('.p4Score') ;
    let p4NewPoint = document.querySelector('#newpointP4') ;
    if(parseInt(p4NewPoint.value)) {
    p4Score.textContent = parseInt(p4Score.textContent) - parseInt(p4NewPoint.value)
    p4NewPoint.value = ''; }
    else {
        p4NewPoint.value = '';}
     changeColor(p4Score)
     
    });        
  

 const addButton = document.querySelector('.add');
const restButton = document.querySelector('.rest');
function changeColor(e){ 
    let i = parseInt(e.textContent)
        if (i > 50){
        e.style.color = 'red'}
        else if(i < 5) {
            e.style.color = 'green'
        }
        else {e.style.color = 'black'}
      };

So it works properly but it doesn't look nice for a portfolio project, I tried to do it dinamic with the following code but I am struggeling:

The failed new js code :

so the idea is just to make this code on each player, instead of repeating all the code above. but this code keeps giving me error p4Score and newpointP4 are undefined.

//   p4Add.addEventListener('click', addFunction(p4Score,newpointP4));
    //   p4Rest.addEventListener('click', restFunction(p4Score,newpointP4));

   function addFunction(e,i){ 
        let es = `.` + e;
        let is = `#` + i;
        let pScore = document.querySelector(es)
        let inputNUmber= document.querySelector(is)
        if(parseInt(inputNUmber.value)) {
          pScore.textContent = parseInt(pScore.textContent) - parseInt(inputNUmber.value)
          inputNUmber.value = ''; }
        else {
          inputNUmber.value = '';}
        }

        function restFunction(e,i){ 
         let es = `.` + e;
        let is = `#` + i;
        let pScore = document.querySelector(es)
        let inputNUmber= document.querySelector(is)
            if(parseInt(inputNUmber.value)) {
              pScore.textContent = parseInt(pScore.textContent) - parseInt(inputNUmber.value)
              inputNUmber.value = ''; }
            else {
              inputNUmber.value = '';}
            }