Will forms define fields that are dynamically created using jQuery?

Question

Will forms define fields that are dynamically created using jQuery?

Background Information

We use openource code to manage widgets. One of the pages allows users to edit data in a table that has potentially hundreds of rows. For each row, it currently populates a drop-down list with hundreds of values. As you can imagine, this is time consuming and not necessary. We will not edit all lines at a time.

So, I'm trying to tweak the code to prevent this from happening. I changed all the dropdown lines in the DIV tags and created a new button for editing them in the line.

When the user clicks on EDIT, the DIV goes to the drop-down menu. So far, so good. The page is loading now under the second and more than 15 minutes.

Problem

The problem is that when the user clicks on SUBMIT (for this particular line) to save their changes, the DIV field that I played in is not included in the POST data.

So specifically, the field looks like this when the page loads:

<td><div id="location_name">canada</div></td>

but after you click on the edit button and running jQuery is running, it looks like this (according to the F12 developer tool and NOT view source):

<td>
    <select tabindex="1" id="location_id" name="location_id">
        <option value="0">-- NONE --</option>
        <option value="15" style="font-weight: bold">canada</option>
        <option value="16" style="font-weight: bold">usa</option>     
    </select>
</td>

This snapshot is created by cloning an existing drop-down menu when the user presses the EDIT button for that particular row. (I clone because the existing dropdown has all the values I need.)

I need the form data to include the value "location_id = 15" for the above example.

What I checked so far: