Managing events for dynamically created elements

Question

I have some dropdowns that I've got wired up, and everything is working as intended so far. What I want to do now, is create a whole bunch of these controls dynamically. More, I want them to behave independently from one another, but to function the exact same way.

Here's my HTML, pretty basic stuff. 3 drop downs, and a modal window. The selection of each drop down will drive the options of the next. For example, the user selects an option from the 'types' dropdown and that triggers the 'methods' dropdown to populate. The 'rules' dropdown is what drives the modal (displaying it, and the contents of the modal).

So just for learning purposes, I've constructed a table and have just copy/pasted my elements twice. And of course, the first set of elements are functioning as expected, and the second set does nothing. I know I'll need some sort of button ("Add row") or something, and that button will basically append raw HTML to the tblTemplates object (unless there is a better way?).

How do I wire up the event so that all dropdowns of id="types" function the same way but only one functions at a time? For example, if I'm in row 2 of this table.. I choose my type, and this populates row2's "methods" dropdown, and then I get row 2's modal.. etc.

    <div id="Template">
        <table id="tblTemplates">
            <tr>
                <td>
                    <div class="Column">
                        Select Type :
                        <select id="types"></select>

                        Select Method:
                        <select id="methods"></select>

                        Select Rule:
                        <select id="rules"></select>
                        <div id="myModal" class="modal">

                            <div id="modalbuttons" class="modal-content">
                                <span id="btnModalClose" class="close">&times;</span>
                                <button id="btnSetRule">Set Rule</button>
                                <div id="modalContents" class="modal-content">
                                </div>
                            </div>

                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="Column">
                        Select Type :
                        <select id="types"></select>

                        Select Method:
                        <select id="methods"></select>

                        Select Rule:
                        <select id="rules"></select>
                        <div id="myModal" class="modal">

                            <div id="modalbuttons" class="modal-content">
                                <span id="btnModalClose" class="close">&times;</span>
                                <button id="btnSetRule">Set Rule</button>
                                <div id="modalContents" class="modal-content">
                                </div>
                            </div>

                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>

Here's my javascript where I've wired up the events

$(document).ready(function () {
    $("#types").change(function() {
        var selectedDatatype = $(this).find(":selected").val();

        $.ajax({
            type: "GET",
            url: "http://localhost:60...."
            contentType: "application/json; charset=utf-8",
            success: function(result) {
                populateListDropdown("methods", result.Result);
            },
            error: function() {},
            timeout: 120000
        });
    });

        $("#methods").change(function() {
        var selectedType = $("#types").find(":selected").val();
        var selectedMethod = $(this).find(":selected").val();

        $.ajax({
            type: "GET",
            url: "http://localhost:60..."
            contentType: "application/json; charset=utf-8",
            success: function(result) {
                populateListDropdown("rules", result.Result);
            },
            error: function() {},
            timeout: 120000
        });
    });
});