Как получить идентификатор выпадающего списка из разных строк таблицы?

Question

В настоящее время я работаю над веб-приложением, которое позволяет пользователю создавать опрос, такой как формы Google, с использованием asp.net C #. В настоящее время возникают проблемы с получением идентификатора сгенерированного выпадающего списка, поэтому я не могу поместить поле в новые строки, вот код для формы:

  <div class="form-group" style="margin:auto; width:80%;">
        <form name="add_question" id="add_question">
            <asp:Label ID="Label1" runat="server" Text="Survey Title: " Font-Size="Large"></asp:Label>
            <input type="text" name="title" id="title" class="form-control question_list" placeholder="Enter Survey Title"/>
            <asp:Label ID="Label2" runat="server" Text="Description: " Font-Size="Large"></asp:Label>
            <br>
            <textarea rows="4" cols="100%" name="description" id="description"  placeholder="Enter description"></textarea>
            <table class="table" id="dynamic_field">
                <tr>
                    <th style="width: 50%">Question</th>
                    <th style="width: 15%">Type of Question</th> 
                    <th style="width: 30%">Fields</th>
                    <th style="width: 5%">Remove</th>
                </tr>
                <tr id="row1">
                    <td style="width: 50%"><input type="text" name="question1" id="question1" class="form-control question_list" placeholder="Enter question"/></td>
                    <td style="width: 15%"><select name="type1" id="type1" class="dropdown">
                            <option selected></option>
                            <option value="1">Multiple Choice</option>
                            <option value="2">CheckBox</option>
                            <option value="3">Short Sentence</option>
                            <option value="4">Paragraph</option>
                            <option value="5">Line Scale</option>
                        </select></td> 
                    <td style="width: 30%"></td>
                    <td style="width: 5%"> <button name="remove" id="1" class="btn btn-danger btn_remove"> X </button></td>

                </tr>
            </table>
            <button type="button" name="add" id="add" class="btn btn-warning" > Add Question </button>
        </form>
        <button type="button" name="submit" id="submit" class="btn btn-success" > Submit </button>
    </div>  

А вот код для генерации полей опроса, который я делаю:

 <script>
    var i = 1;

        $("#add").click(function () {

            i++;
            $("#dynamic_field").append('<tr id="row' + i + '"> <td> <input type="text" name="question' + i + '" id="question'
                + i + '" class="form-control question_list" placeholder="Enter question"/> </td><td><select name="type'
                + i + '" id="type' + i + '">'
                + '<option selected></option>'
                + '<option value="1">Multiple Choice</option>'
                + '<option value="2">CheckBox</option>'
                + '<option value="3">Short Sentence</option>'
                + '<option value="4">Paragraph</option>'
                + '<option value="5">Line Scale</option>'
                + '</select></td><td></td><td><button name="remove' + i + '" id="'
                + i + '" class="btn btn-danger btn_remove"> X </button>  </td> </tr> ');
        });

        $(document).on('click', '.btn_remove', function () {
            var button_id = $(this).attr("id");
            $("#row" + button_id + "").remove();
        });

        $('#type1').change(function () {
            var x = 1;
            if ($(this).val() == '3') {
                $('#myInput' + x + '').remove();      
                var row = document.getElementById("row1");
                var z = row.insertCell(2);        
                z.innerHTML = '<td style="width: 30%"><input id="myInput' + x + '" type="text" style="width: 80%" /></td>';
                row.deleteCell(3);
            }
            else if ($(this).val() == '4') {
                $('#myInput' + x + '').remove();
                var row = document.getElementById("row1");
                var z = row.insertCell(2);
                z.innerHTML = '<td style="width: 30%"><textarea rows="2" cols="40" name="description" id="myInput' + x + '"></textarea></td>';
                row.deleteCell(3);
            } else {
                $('#myInput'+x+'').remove();
            }

        });

</script>

Я также открыт для любых идей, которые могут сделать это проще в создании.

Answer 1

Создать таблицу как

<table class="table" id="dynamic_field">
   <thead>
       <tr>
           <th style="width: 50%">Question</th>
           <th style="width: 15%">Type of Question</th> 
           <th style="width: 30%">Fields</th>
           <th style="width: 5%">Remove</th>
       </tr>
   </thead>
   <tbody>
   </tbody>
</table>

При добавлении строк добавляйте к телу.

$("#add").click(function () {

        i++;
        $("#dynamic_field tbody").append('<tr id="row' + i + '"> <td> <input type="text" name="question' + i + '" id="question'
            + i + '" class="form-control question_list" placeholder="Enter question"/> </td><td><select name="type'
            + i + '" id="type' + i + '">'
            + '<option selected></option>'
            + '<option value="1">Multiple Choice</option>'
            + '<option value="2">CheckBox</option>'
            + '<option value="3">Short Sentence</option>'
            + '<option value="4">Paragraph</option>'
            + '<option value="5">Line Scale</option>'
            + '</select></td><td></td><td><button name="remove' + i + '" id="'
            + i + '" class="btn btn-danger btn_remove"> X </button>  </td> </tr> ');
    });

Изменить событие изменения следующим образом

$('#dynamic_field').on('change','[id^=type]',function () {
        var x = 1;
        if ($(this).val() == '3') {
            $(this).closest('tr').find('[id^=myInput]').remove();      
            var row = $(this).closest('tr');
            var z = row.insertCell(2);        
            z.innerHTML = '<td style="width: 30%"><input id="myInput' + x + '" type="text" style="width: 80%" /></td>';
            row.deleteCell(3);
        }
        else if ($(this).val() == '4') {
            $(this).closest('tr').find('[id^=myInput]')
            var row = $(this).closest('tr');
            var z = row.insertCell(2);
            z.innerHTML = '<td style="width: 30%"><textarea rows="2" cols="40" name="description" id="myInput' + x + '"></textarea></td>';
            row.deleteCell(3);
        } else {
            $(this).closest('tr').find('[id^=myInput]')
        }

    });