title: Javascript error when writing out html instead of dynamically creating element
body: <p>I have a javascript function that runs fine onclick when the td element is added via javascript. The remove button works fine. But when I create the element with php and click remove, I get:</p>
  
  <pre><code>SyntaxError: syntax error
  var header = document.getElementById(
  </code></pre>
  
  <p>Even though the counter is working correctly. Is this a scope problem?
  here is my code:</p>
  
  <p>JS</p>
  
  <pre><code>var labor_count = 0;
  var part_count = 0;
  
  function incrementLabor(count) {
      labor_count = parseInt(count);
      console.log(labor_count);
  }
  </code></pre>
  
  <p>HTML/PHP</p>
  
  <pre><code>public function getTableRow()
  {
      return '
  &lt;tr&gt;
  &lt;td&gt;
      &lt;input
          type="text"
          name="work_description[]"
          value="'.$this-&gt;description.'"&gt;
  &lt;/td&gt;
  &lt;td&gt;
      &lt;input
          class="hours calculate"
          type="text"
          name="hours[]"
          value="'.$this-&gt;hours.'"
          onchange="calculate();"
          size="2"&gt;
  &lt;/td&gt;
  &lt;td&gt;
      &lt;input
          class="rate calculate"
          type="text"
          name="rate[]"
          value="'.$this-&gt;rate.'"
          onchange="calculate();"
          size="2"&gt;
  &lt;/td&gt;
  &lt;td&gt;
      &lt;input
          type="button"
          value="Remove"
          onclick="
              (function () {
                  var parent = this.parentNode.parentNode; //get the row node
                  table.deleteRow(parent.rowIndex); //Delete the row index behind it.
                  labor_count--;
                  console.log(labor_count);
                  if (labor_count === 0) {
                      var header = document.getElementById("labor_header");
                      header.parentNode.removeChild(header);
                  })()
              };" &gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  
  ';
  }
  </code></pre>
  
  <p>Here is the working function:</p>
  
  <pre><code>function removeIt(element) {
          var parent = element.parentNode.parentNode; //get the row node
          var table = parent.parentNode;
          table.deleteRow(parent.rowIndex); //Delete the row index behind it.
          labor_count--;
          console.log(labor_count);
          if (labor_count === 0) {
              var header = document.getElementById("labor_header");
              header.parentNode.removeChild(header);
          }
  }
  </code></pre>