How do I interact with elements that are created dynamically?

Question

I have a setup like so on a webpage:

Clicking on Add Filter adds a new entry and Remove will remove the line next to it.

The code for a single line is as follows:

<tr>
  <td><select id="Column1">
    <option value="0"></option>
    <option value="1">Value a</option>
    <option value="2">Value b</option>
  </select></td>

  <td><select id="Condition1">
    <option value="0"></option>
    <option value="1">IS EQUAL TO</option>
    <option value="2">IS NOT EQUAL TO</option>
    <option value="3">IS LIKE</option>
    <option value="4">IS NOT LIKE</option>
    <option value="5">IS LESS THAN</option>
    <option value="6">IS LESS THAN OR EQUAL TO</option>
    <option value="7">IS GREATER THAN</option>
    <option value="8">IS GREATER THAN OR EQUAL TO</option>
  </select></td>

  <td><input type="text" id="Values1" /></td>

  <td><input type="radio" name="AndOr1" id="And1" value="1">AND</input>
    <input type="radio" name="AndOr1" id="Or1" value="2">OR</input> 
  <span class="RemoveFilter">Remove</span></td>
</tr>

When the line is duplicated the numbers in the IDs increment by one. The whole table has an ID of Filters so what I would like to know is how do I loop through the tr lines so that I can grab the values/parameters and send them back to the server? There could potentially be an infinite number of filters selected by the user. (Although this is not needed in this context)

Answer 1

instead of incrementing numbers in IDs you can use array name for your inputs and selects:

ie:

<input type="text" name="Values[]" />

Answer 2

If you alter the ID values to be something like "And_1" and "Or_1" (notice the underscore), then you can get away with a JQuery selector like this:

var fields = $("input[id$=_" + id + "]");

It will select all of the inputs with that "row id".