Проблема с попыткой сделать функцию динамической, она не читает мне параметр функции

Question

Сначала я опубликую исходный код, который довольно жестко закодирован и содержит кучу строк.

Итак, идея заключается в отслеживании очков для игры, поэтому вы просто записываете во входные данные новые очки и нажимаете «Отдых» или «Добавить» в зависимости от счета каждого раунда, и он будет добавлен к счету игрока.

ОСНОВНОЙ КОД 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'}
      };

Итак, он работает правильно, но выглядит не очень хорошо для проекта портфолио, я попытался сделать это динамически с помощью следующего кода, но я изо всех сил пытаюсь:

Неудачный новый код js:

поэтому идея состоит в том, чтобы просто сделать этот код для каждого игрока, вместо того, чтобы повторять весь код выше. но этот код продолжает выдавать мне ошибку p4Score и newpointP4 не определены.

      //   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 = '';}
            }