My goal is to have a table with various items dynamically generated within a single form. Each row has a unique input value associated with the row. I would like the user to be able to click anywhere on the row (without a submit button) and have that input sent via a POST request. I have only been successful in having the form submit the same input value for every item I select, as opposed to 1, 2, 3, etc. What am I missing?

```js
 $("tr").on('click',function(){
    var id = $(this).attr('value');
    var $form = $('#form1');

    $form.find("tr[id^='blah']").val(id);

    $form.submit();

  });
```

```html
<table>
<form method="POST" id="form1" action="action">
      <tr id="blah1" value="1">
         <input name="numberInput" value="1" type="hidden"/>
        <td><b>Item 1</b>
        <td><b>$5</b></td>
      </tr>

      <tr id="blah1" value="2">
         <input name="numberInput" value="2" type="hidden"/>
        <td><b>Item 2</b>
        <td><b>$8</b></td>
      </tr>

      ...

</form>
</table>
```

**Edit**

I figured it out myself. I added a unique identifier to the form, kept the form inside the table, and made the below modification to the jQuery.

```
$("tr").click(function(){
    var uniqueID = $(this).find("td:first-child > input").val();
    $("#formName" + uniqueID).submit();
});

```