title: Uncaught ReferenceError in javascript
body: <p>I am developing a Ruby on rails project. And in the view file I have some javascript to clone table row on button click. Each table row contains several input text boxes. Now I want to assign the id to a input text box of the newly cloned row dynamically. But I am facing this error:</p>
  
  <p>index:48 Uncaught ReferenceError: item1 is not defined</p>
  
  <p>index is the view name.</p>
  
  <p>My code is:</p>
  
  <pre><code>  function insRow()
    {
        var x=document.getElementById('POITable');
        var new_row = x.rows[1].cloneNode(true);
        new_row.style.visibility = "visible";
        var len = x.rows.length;
  
        new_row_itembox=new_row.cells[0].getElementsByTagName("input");
        new_row_itembox.id=&lt;%= ("item"+@counter.to_s) %&gt;;    //this line causes the error
        //console.log(new_row_itembox);
  
        var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
        inp1.id += len;
        inp1.value = '';
        var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
        inp2.id += len;
        inp2.value = '';
        x.appendChild( new_row );
  
        var sec_last_row=x.rows[x.rows.length-2];
        console.log(x.rows.length);
        console.log(x.rows[x.rows.length-2]);
        sec_last_row.cells[5].innerHTML="&lt;img alt='Icon' src='/assets/minus-icon.png' id='delPOIbutton' onclick='deleteRow(this)'/&gt;";
        sec_last_row.cells[6].innerHTML="";
  
        var last_row=x.rows[x.rows.length-1]
  
        last_row.cells[5].innerHTML="&lt;img alt='Icon' src='/assets/add-icon.png' id='addmorePOIbutton' onclick='insRow(this)'/&gt;";
        last_row.cells[6].innerHTML="&lt;img alt='Icon' src='/assets/minus-icon.png' id='delPOIbutton' onclick='deleteRow(this)'/&gt;";
    }
  </code></pre>
  
  <p>The above javascript function is for inserting another row on a button click.</p>
  
  <p>In the code, @counter is a rails variable defined in the corresponding controller action.</p>
  
  <p>If I remove that part and assign the id of the input box statically,it working fine.</p>
  
  <p>My html code is:</p>
  
  <pre><code>&lt;body&gt;
  &lt;form&gt;
  &lt;center&gt;
  &lt;div id="POItablediv"&gt;
  &lt;br/&gt;
  &lt;table id="POITable"&gt;
      &lt;tr&gt;
          &lt;th&gt;Item&lt;/th&gt;
          &lt;th&gt;Brand&lt;/th&gt;
          &lt;th&gt;UOM&lt;/th&gt;
          &lt;th&gt;Quantity&lt;/th&gt;
          &lt;th&gt;Remarks&lt;/th&gt;
      &lt;/tr&gt;
  
      &lt;tr style="visibility:hidden;"&gt;             &lt;!-- This is just a dummy row--&gt;
          &lt;td&gt;&lt;input size=25 type="text"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input size=25 type="text"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input size=25 type="text"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input size=25 type="text"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input size=25 type="text"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;img alt="Icon" src="/assets/add-icon.png" id="addmorePOIbutton" onclick="insRow()" /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;img alt="Icon" src="/assets/minus-icon.png" id="delPOIbutton" onclick="deleteRow(this)"/&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;&lt;input size=25 type="text"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input size=25 type="text"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input size=25 type="text"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input size=25 type="text"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input size=25 type="text"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;img alt="Icon" src="/assets/add-icon.png" id="addmorePOIbutton" onclick="insRow()" /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;img alt="Icon" src="/assets/minus-icon.png" id="delPOIbutton" onclick="deleteRow(this)"/&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
      &lt;/div&gt;
  
      &lt;input type="submit" name="submit_button" onclick="make_hash()"&gt;
  
  
    &lt;/center&gt;
    &lt;/form&gt;
    &lt;/body&gt;
  </code></pre>