JSFiddle - React, Tailwind, and code Playground

clone a row and dynamically change the second select value when changing the first select

by Akram kamal

HTML

<div id="input1" class="clonedInput">
    <select id="channels_1" name="channels[]" class=" product_change" style="width:8em;">
        <option value="">1</option>
        <option value="">2</option>
    </select>
    <select id="types_1" name="types[]" style="width:8em;" class=" product_change"></select>
</div>
<input type="button" id="btnAdd" value="Add record" />
<input type="button" id="btnDel" value="Remove record" />

JavaScript

$(document).ready(function () {
    $('#btnDel').prop('disabled', true);
    $('#btnAdd').click(function () {

        num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have

        var newNum = num + 1; // the numeric ID of the new input field being added

        // create the new element via clone(), and manipulate it's ID using newNum value

        var newElem = $('#input1').clone().attr('id', 'input' + newNum);

        // manipulate the name/id values of the input inside the new element
        newElem.find('#channels_1').attr('id', 'channels_' + newNum).attr('name', 'channels[]');
        newElem.find('#types_1').attr('id', 'types_' + newNum).attr('name', 'types[]');

        // insert the new element after the last "duplicatable" input field

        $('#input' + num).after(newElem);

        // enable the "remove" button

        $('#btnDel').prop('disabled', false);

        // business rule: you can only add 5 names

        if (newNum == 5)

        $('#btnAdd').prop('disabled', true);

    });

    $('#btnDel').click(function () {

        var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
        $('#input' + num).remove(); // remove the last element
        // enable the "add" button

        $('#btnAdd').prop('disabled', false);
        // if only one element remains, disable the "remove" button

        if (num - 1 == 1)

        $('#btnDel').prop('disabled', true);

    });
});
// delegate event handler
$(document).on('change ', 'select[id^=channels]', function () {
    //var value = $('option:selected', this).val();
    $(this).next('select').html("<option>Test</option>");
}).keyup();