title: How do I pass a hidden input to JavaScript
body: <p>I am very new to rails and javascript.  I have a table as shown below, I am trying to pass the item id and the selected category to an ajax call which  updates the item.id's category.</p>
  
  <p>What is going wrong is I don't seem to be able to pass the correct it.id to the ajax call.  It passes the first it.id rather than tho one on the row I have selected. I have had this working but I did a lot of clean up of other code and it no longer works.  I guess I just did something lucky the first time around without really knowing how to do it.</p>
  
  <pre><code>&lt;table class="table table-hover"&gt;
  &lt;tbody&gt;
  &lt;% @itemised.each do |it| %&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;%= it.date %&gt; &lt;/td&gt;
      &lt;td&gt;&lt;%= it.item  %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;%= number_to_currency(it.value, :unit =&gt; "$") %&gt;&lt;/td&gt;
  &lt;td&gt;&lt;form name="myform" action="" method="POST"&gt;
  &lt;input type="button" name="button" value="Submit"   onClick="singleItem(this.form)" &gt;
  &lt;select name="list"&gt;
    &lt;% @array_of_live_categories.each do |cats|  %&gt;
       &lt;option&gt; &lt;%= cats %&gt; &lt;/option&gt;
           &lt;% end %&gt;
        ## &lt;option&gt; &lt;%= it.id %&gt; &lt;/option&gt;
  &lt;/select&gt;
  &lt;input type= "hidden" id="id" name="id" value= "&lt;%= it.id %&gt;"&gt;
  
  &lt;/form&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>I am using the following javascript to test.</p>
  
  <pre><code>function singleItem (form) {
  Cat_index = form.list.selectedIndex;
  Cat = form.list.options[Cat_index].text;
  Item_id = document.getElementById('id').value;
   console.log(Item_id) ;
   console.log(Cat) ;
  
  $.ajax({
  type: "POST",
  url: '/items/single_categorise',
  data: { id: Item_id, newcat: Cat},
  });
  }
  </code></pre>
  
  <p>I just included the ##  &lt;%= it.id %>  as a way to prove that item.id does exist.</p>
  
  <p>Below is a section of the source code, there is a lot more to it but from this I can see that the value being passed back looks correct.  However, when singleItem function is run it passes a different value (the value associated with the first item on the table). </p>
  
  <pre><code>&lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;tr&gt;
  &lt;td&gt;15/01/2015 &lt;/td&gt;
  &lt;td&gt;J P &amp;amp; Y P Mahaffy&lt;/td&gt;
  &lt;td&gt;$1,500.00&lt;/td&gt;
  
  
  &lt;td&gt;&lt;form name="myform" action="" method="POST"&gt;
  &lt;input type="hidden" id="id" name="id" value= "J P &amp;amp; Y P Mahaffy"&gt;
  &lt;input type="button" name="button" value="Submit" onClick="singleItem(this.form)" &gt;
  &lt;select name="list"&gt;
  &lt;option&gt; bank fees &lt;/option&gt;
  &lt;option&gt; cash out &lt;/option&gt;
  &lt;option&gt; vehicle expenses &lt;/option&gt;
  &lt;option&gt; health &lt;/option&gt;
  &lt;option&gt; office expenses &lt;/option&gt;
  &lt;option&gt; income &lt;/option&gt;
  &lt;option&gt; entertainment &lt;/option&gt;
  &lt;option&gt; transfer &lt;/option&gt;
  &lt;option&gt; ird payment &lt;/option&gt;
  &lt;option&gt; unsorted &lt;/option&gt;
  &lt;option&gt; regular payment &lt;/option&gt;
  &lt;option&gt; interest &lt;/option&gt;
  &lt;option&gt; user a &lt;/option&gt;
  ## &lt;option&gt; J P &amp;amp; Y P Mahaffy &lt;/option&gt;
  &lt;/select&gt;
  
  &lt;/form&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>Any help would be appreciated.</p>
  
  <p>Harleigh</p>