如果在同一个单元格中，如何使按钮成对工作，以及将每个按钮识别为单独的脚本？

      function functionAdd() {
 

***> here I add cells and rows to the table***

----------------------------------------

            var table = document.getElementById("id");
            var row = table.insertRow(1);
            var cell = row.insertCell(0);
            var cell1 = row.insertCell(1);
            var cell2 = row.insertCell(2);
            var cell3 = row.insertCell(3);
             cell.innerHTML = "New function";
             cell1.innerHTML = "<div class='row'>"+
              " <button type='button' id='on'>ON</button>"+
              " <button type='button' id='off'>OFF</button>"+
              "</div>";
              cell1.style.width = '100px';
             cell2.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='greenPoint.png' style = 'width: 10px; height:10px;'>"
             cell3.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='deleteIcon.png' style = 'width: 20px; height:20px;'>"
    

***>      there is the condition for buttons***

    document.getElementById('on').disabled = false;
    document.getElementById('off').disabled = false;
        //on click changes on/off to green
        document.getElementById('on').onclick = function(){
          this.disabled = true;
          document.getElementById('off').disabled = false;
          if (this.disabled == false) {
            document.getElementById('off').disabled = true;
          }else if (this.disabled == true) {
            document.getElementById('off').disabled = false;
          }
          cell2.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='greenPoint.png' style = 'width: 10px; height:10px;'>"
        }
        //on click changes on/off to red
        document.getElementById('off').onclick = function(){
          this.disabled = true;
          document.getElementById('on').disabled = false;
          cell2.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='redPoint.png' style = 'width: 10px; height:10px;'>"
        }
    
    }      function functionAdd() {
 

*