title: On-click (check appears) action is performed, second click (check disappears) action is performed again. Need, second click to delete first action
body: <pre><code>&lt;body&gt;
      &lt;h1 align="center"&gt;Safety Summary Generator&lt;/h1&gt;
      &lt;table style="width:"&gt;
          &lt;tr&gt;
              &lt;th height="200" width="150"&gt;
                  &lt;div id="CEC"&gt;
                      &lt;img src="../CHEMICAL EXPOSURE - CORROSIVE.png" alt="CHEMICAL EXPOSURE - 
                  CORROSIVE" width="100" height="100"&gt;
                          &lt;p&gt;CHEMICAL EXPOSURE - CORROSIVE&lt;/p&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>The user selects the radio button and the action is performed and a check appears. Currently when the radio is selected a second time it performs the action again but the check is removed. I need the second click to delete the first action. </p>
  
  <pre><code>&lt;input type="checkbox" value="Load" onClick="addRow('CEC', 1)"&gt;
  &lt;/th&gt;undefined&lt;/tr&gt;undefined&lt;/table&gt;undefined&lt;h3 align="center"&gt;(Safety summary print sheet below)&lt;/h3&gt;undefined&lt;div&gt;undefined&lt;h1&gt;
  &lt;hr color="#00cc00" width="100%"&gt;
  &lt;/h1&gt;
  &lt;div id="printDiv"&gt;
      &lt;table id="2table" border="1"&gt;
          &lt;h2&gt;Chemical Hazards&lt;/h2&gt;
          &lt;thead id="2table-head"&gt;&lt;/thead&gt;
          &lt;tbody id="2table-body"&gt;&lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;h1&gt;
      &lt;hr color="#00cc00" width="100%"&gt;
      &lt;/h1&gt;
      &lt;div align="center"&gt;
          &lt;input type="button" onclick="PSSSReset()" value="PSSS/HWDI Delete"&gt;
          &lt;/div&gt;
          &lt;br&gt;
              &lt;h3 align="center" style="color: red"&gt;Caution: Be sure to review the print sheet (between the 
              green lines) before pressing the Print Safety Summary button. You can only print once before 
              refreshing the browser.&lt;/h3&gt;
              &lt;div align="center"&gt;
                  &lt;button id="doPrint"&gt;Print Saftey Summary&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  //Table row and column
  </code></pre>
  
  <p>Need event listener to identify first click and perform the below function.
  Need event listener to identify second click and delete fist click function and reset. </p>
  
  <pre><code> "use strict";
  var t_names = ["1table-body", "2table-body", "3table-body", "4table-body"];
  var counter = [0, 0, 0, 0];
  
  function addRow(v_id, t_id) {
      var t_string = t_names[t_id];
      console.log(t_string)
      var tableBody = document.getElementById(t_string);
      //find last row
      var row = tableBody.rows[tableBody.rows.length - 1];
      //if the row has six cells or there are no rows create a new one
      if (row === null || row === undefined || row.cells.length &gt;= 6) {
          row = document.createElement("tr");
          tableBody.appendChild(row);
      }
      //create new cell
      var th = document.createElement("th");
      //add data to cell
      th.innerHTML = document.getElementById(v_id).innerHTML;
      //add cell to row
      row.appendChild(th);
  }
  </code></pre>