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

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

I have dynamically added new row by cloning the last row. The row contains two select picker control.
I made another function that dynamically change the value of the second select when changing the first select.
This function is not working on the cloned rows.
Any idea what I made wrong??


<html>
<head>
<script type="text/javascript" src="./include/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
  $('#btnDel').attr('disabled', 'disabled');
            $('#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').attr('disabled', false);

                // business rule: you can only add 5 names

                if (newNum == 5)

                    $('#btnAdd').attr('disabled', 'disabled');

            });

            $('#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').attr('disabled', false);
                // if only one element remains, disable the "remove" button
                if (num - 1 == 1)

                    $('#btnDel').attr('disabled', 'disabled');

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

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

</script>
</head>
<body>

<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" />
</body>
</html>