title: Updating position of 2nd chess piece makes the piece disappear
body: <p>I am teaching myself JS. I am able to move a piece to a new location but for the 2nd piece the chess piece disappears. It seems that the addEventListener is going into a loop and I am not understanding why. Just need to understand what concept am I missing here:
  My code below:
  chess.html</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;title&gt;Chess board&lt;/title&gt;
      &lt;style&gt;
          .cell {
              height: 30px;
              width: 30px;
              border: 1.5px solid grey;
              border-style: inset;
          }
   
          .greencell {
              background-color: #AFE1AF;
          }
  
          .darkgreencell {
              background-color: #097969;
          }
          .redcell {
              background-color: red;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script src=&quot;js/chess.js&quot; defer&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>js/chess.js</p>
  <pre><code>
  function movep(cbp,cbt,i,j) {
      //Creating rules for pawn
    console.log('P');
      //console.log(cbp);
      //refresh_colors(cbp,cbt);
      if ((i&gt;=0) &amp; (i&lt;=7)) {
          if(cbp[i+1][j].length&lt;2) {
              //Based on player 1, if the location below the pawn is open then cbt masks that as 1
              cbt[i+1][j]=1;
          }
      }
      potential_moves(cbp,cbt,[i,j]);
    update_board(cbp,cbt);
  }
  
  var possiblelocs=function(event,i,j,cbp,cbt) {
      //based on string value of cbp (the chess piece of interest) 
    //I have to create rules for possible ways it can go
    if (cbp[i][j].includes('P') ) {movep(cbp,cbt,i,j);}
      //else if (cbp[i][j].includes('K')) {console.log('K');}
      else if (cbp[i][j].includes('N')) {movep(cbp,cbt,i,j);}//using the function for pawn here for debugging purposes
      //else if (cbp[i][j].includes('Q')) {console.log('Q');}
      else if (cbp[i][j].includes('R')) {movep(cbp,cbt,i,j);}//using the function for pawn here for debugging purposes
      //else if (cbp[i][j].includes('B')) {console.log('B');}
      //console.log(cbp);
  }
  
  function update_board(cbp,cbt) {
    //fills the board with all the proper pieces
    var elem = document.getElementsByTagName('td');
    //console.log(cbp);
    for(var i=0;i&lt;8;i++) {
      for(var j=0;j&lt;8;j++) {
          elem[8*i+j].innerHTML=cbp[i][j];
          if (elem[8*i+j].innerHTML.length &gt; 1) {
          //create a clickable EventListener if there is a string value &gt;1 (i.e. not-empty)
              elem[8*i+j].addEventListener( &quot;click&quot;,possiblelocs.bind(event,'str',i,j,cbp,cbt) );
          }
      }
    }
  }
  
  
  var movelocs=function(event,i,j,cbp,cbt,pc) {
    //replace old location of string in cbp to the new one
    cbp[i][j]=cbp[pc[0]][pc[1]];
      cbp[pc[0]][pc[1]]='';
    update_board(cbp,cbt);
  }
  
  function potential_moves(cbp,cbt,pc) {
    //updates the board with possible location a specific piece can move (based on cbt) 
    //and makes the red cells clickable
    var elem = document.getElementsByTagName('td');
    for(var i=0;i&lt;8;i++) {
      for(var j=0;j&lt;8;j++) {
          if (cbt[i][j]==1) {
                  elem[8*i+j].setAttribute('class', 'cell redcell');
          //once click move the board to the new location
                  elem[8*i+j].addEventListener( &quot;click&quot;,movelocs.bind(event,'str',i,j,cbp,cbt,pc) );
              }
          }
      }
  }
  
  </code></pre>
  <p>I have tried to root cause it but I am unable to root cause even more.
  Here is the behavior i see:
  When the board starts up:</p>
  <p><a href="https://i.stack.imgur.com/br9tr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/br9tr.png" alt="enter image description here" /></a></p>
  <p>After I click 'R11' I see a red square show up down below to see where it can go as show below:
  <a href="https://i.stack.imgur.com/GL3Xd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GL3Xd.png" alt="enter image description here" /></a></p>
  <p>Once that is completed I see R11 pieces moves down 1 and I also click on N11 to see my available options (I know the rules are not right for those pieces). I then see the following image:
  <a href="https://i.stack.imgur.com/1kD75.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1kD75.png" alt="enter image description here" /></a></p>
  <p>At this point I click on the red square below N11 and I see that N11 has completely gone. <a href="https://i.stack.imgur.com/NUMci.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NUMci.png" alt="enter image description here" /></a></p>
  <p>My best understanding is that movelocs goes into a loop and deletes the piece I just moved. I am not sure why it does that.
  If someone has any advice on how to debug this that would helpful as well.</p>