После нажатия на одну кнопку - обработчик второй кнопки не срабатывает

'use strict'; 
 
var row = "<tr><td></td><td></td><td></td><td></td></tr>"; 
var col = "<td></td>"; 
var addBp = '<button  class="field__addButton field__addButton_right">+</button>'; 
var addBdown 
var fullfield = document.getElementsByTagName('div')[0]; 
 
var field = document.getElementsByTagName('table'); 
var ButtonDown = document.getElementsByClassName('field__addButton_down')[0]; 
var ButtonRight = document.getElementsByClassName('field__addButton_right')[0]; 
var deleteButton = document.getElementsByClassName('field__deleteButton'); 
 
 
ButtonDown.addEventListener("click", onBottomButtonClick); 
ButtonRight.addEventListener("click", onRightButtonClick); 
/*deleteButton[0].addEventListener("click", onLeftButtonClick); 
deleteButton[1].addEventListener("click", onTopButtonClick); 
*/ 
/////////////////////////////////////////////////////////////////////////////////////////////////////////// 
/*Add Buttons*/ 
/////////////////////////////////////////////////////////////////////////////////////////////////////////// 
 
 
function onBottomButtonClick(event) { 
  event.target.remove(); 
  document.querySelector('table tbody').innerHTML += '<tr></tr>'; 
  for (var i = 0; i < document.querySelector('tr').cells.length; i++) { 
    document.querySelector('tr:last-child').innerHTML += '<td></td>'; 
  } 
  ButtonDown = document.querySelector('tr:last-child td:nth-child(2)').insertBefore(event.target, null); 
} 
 
function onRightButtonClick(event) { 
  event.target.remove(); 
 
  for (var i = 0; i < document.querySelectorAll('tr').length; i++) { 
    document.querySelectorAll('tr')[i].innerHTML += '<td></td>'; 
  } 
  ButtonRight = document.querySelector('tr:nth-child(2) td:last-child').insertBefore(event.target, null); 
 
} 
/////////////////////////////////////////////////////////////////////////////////////////////////////////// 
/*Delete Buttons*/ 
/////////////////////////////////////////////////////////////////////////////////////////////////////////// 
function onTopButtonClick() { 
  for (var i = 0; i < document.getElementsByClassName('field')[0].getElementsByTagName('tr').length; i++) { 
    document.getElementsByClassName('field')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[0].remove(); 
  } 
  deleteButton[1].style.opacity = 0; 
  ButtonRight.style.left = parseInt(ButtonRight.style.left) - 52 + 'px'; 
} 
 
function onLeftButtonClick() { 
  document.getElementsByClassName('field')[0].getElementsByTagName('tr')[0].remove(); 
  ButtonDown.style.top = parseInt(ButtonDown.style.top) - 52 + 'px'; 
  deleteButton[0].style.opacity = 0; 
} 
/////////////////////////////////////////////////////////////////////////////////////////////////////////// 
function showButtons() { 
  deleteButton[0].style.visibility = 'visible'; 
  deleteButton[1].style.visibility = 'visible'; 
} 
 
function hideButtons() { 
  deleteButton[0].style.visibility = 'hidden'; 
  deleteButton[1].style.visibility = 'hidden'; 
} 
/////////////////////////////////////////////////////////////////////////////////////////////////////////// 
/*Onmouseover function*/ 
/////////////////////////////////////////////////////////////////////////////////////////////////////////// 
fullfield.onmouseover = function(event) { 
  var target = event.target; 
  if (target.matches('td:first-child') || target.matches('tr:first-child td') || target.matches('td:last-child') || target.matches('tr:last-child td')) { 
 
  } else { 
    document.querySelector('tr').cells[target.cellIndex].innerHTML = '<button class="field__deleteButton  field__deleteButton_left">-</button>'; 
    document.querySelector('table').rows[target.parentElement.rowIndex].cells[0].innerHTML = '<button class="field__deleteButton  field__deleteButton_left">-</button>'; 
  } 
} 
fullfield.onmouseout = function(event) { 
  var target = event.target; 
  if (target.matches('td:first-child') || target.matches('tr:first-child td') || target.matches('td:last-child') || target.matches('tr:last-child td')) { 
 
  } else { 
    ///  document.querySelector('tr').cells[target.cellIndex].innerHTML= ''; 
    ///  document.querySelector('table').rows[target.parentElement.rowIndex].cells[0].innerHTML= ''; 
  } 
} 
 
document.getElementsByClassName('field__deleteButton')[0].onmouseover = function() { 
 
} 
/* 
deleteButton[0].onmouseout = function(){ 
    hideButtons(); 
     
     
deleteButton[1].onmouseover = function(){ 
    this.style.visibility = 'visible'; 
} 
deleteButton[1].onmouseout = function(){ 
    hideButtons(); 
}*/

* { 
  margin: 0; 
  padding: 0; 
} 
 
table { 
  position: relative; 
  /*top: 50px; 
        left:50px;*/ 
  border-spacing: 0; 
  outline: 1px solid white; 
  box-sizing: border-box; 
} 
 
.field__deleteButton { 
  background: #af0100 !important; 
  box-sizing: border-box; 
} 
 
.field__deleteButton_top { 
  outline: 5px solid rgba(0, 0, 0, 0); 
} 
 
table tr:first-child td, 
tr:last-child td { 
  background: none; 
  border: none; 
} 
 
table tr td:first-child, 
tr td:last-child { 
  background: none; 
  border: none; 
} 
 
td { 
  border: 1px solid white; 
} 
 
td, 
.field__addButton, 
.field__deleteButton { 
  width: 50px; 
  height: 50px; 
  background: #4cabe3; 
  position: relative; 
} 
 
button { 
  border: none; 
  font-size: 30px; 
  color: white; 
} 
 
.field__addButton { 
  background: #f0a41b; 
  border: none; 
} 
 
.field__deleteButton:hover { 
  background: #c84d4c !important; 
  visibility: visible; 
} 
 
.field__addButton:hover { 
  background: #f5bf5c !important; 
} 
 
.field { 
  position: relative; 
  display: inline-block; 
  margin: 55px 0 0 55px; 
  outline: 2px solid #4cabe3; 
}

<!DOCTYPE html> 
<html> 
 
<head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <title>НАЧАЛО РАБОТЫ С BRACKETS</title> 
  <meta name="description" content="Интерактивное руководство по началу работы в Brackets."> 
  <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
  <div class=field> 
    <table> 
      <tbody> 
        <tr> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
        </tr> 
 
        <tr> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td><button class="field__addButton field__addButton_right">+</button></td> 
        </tr> 
 
        <tr> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
        </tr> 
        <tr> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
        </tr> 
        <tr> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
        </tr> 
 
        <tr> 
          <td></td> 
          <td><button class="field__addButton field__addButton_down">+</button></td> 
          <td></td> 
          <td></td> 
          <td></td> 
          <td></td> 
        </tr> 
      </tbody> 
    </table> 
  </div> 
  <script type="text/javascript" src="script.js"></script> 
</body> 
 
</html>