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

advice please: 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.2.6.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[]');
newElem.find('#items_1').attr('id', 'items_' + newNum).attr('name', 'items[]');
newElem.find('#quantity_1').attr('id', 'quantity_' + newNum).attr('name', 'quantity[]');
newElem.find('#budget_1').attr('id', 'budget_' + newNum).attr('name', 'budget[]');
newElem.find('#profit_1').attr('id', 'profit_' + newNum).attr('name', 'profit[]');
newElem.find('#description_1').attr('id', 'description_' + newNum).attr('name', 'description[]');
newElem.find("input:text").val("").end();

                // 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');

            });
        });
</script>
</head>
<body>
<?php
$channels_arr = array();
$channels_arr[] = "";
$channels_arr[] = "Google";
$channels_arr[]= "Facebook";
$channels_arr[] = "Twitter";
$channels_arr[] = "Eshots";
$channels_arr[] = "SEM";
$channels_arr[] = "Other";

$types_arr = array();
$types_arr[''][] = "";
$types_arr['Google'][] = "Power Forward";
$types_arr['Google'][] = "Small Forward";
$types_arr['Google'][] = "Center";
$types_arr['Facebook'][] = "Center Forward";
$types_arr['Facebook'][] = "Right Wing";
$types_arr['Facebook'][] = "Left Wing";
$types_arr['Twitter'][] = "Halfback";
$types_arr['Twitter'][] = "Fullback";
$types_arr['Twitter'][] = "Wide Reciever";
$types_arr['SEM'][] = "Tight End";
$types_arr['Other'][] = "Center";
?>
<div id="input1" class="clonedInput">
        <table>
        <tr>
                <td class="details_screen">Channel</td>
                <td class="details_screen">Type</td>
                <td class="details_screen">Item</td>
<td class="details_screen">Quantity</td>
<td class="details_screen">Budget</td>
<td class="details_screen">Profit %</td>
</tr>
      <tr>
<td>
<select id="channels_1" name="channels[]" class=" product_change" style="width:8em;">
       
<?php foreach($channels_arr as $ca) { ?>
        <option value="<?php echo $ca; ?>"><?php echo $ca; ?></option>
        <?php } ?>
    </select>
</td>
                        <td>
    <select id="types_1" name="types[]" style="width:8em;" class=" product_change">
                    
    </select>
</td>
                        <td>
<select id="items_1" name="items[]" class=" product_change" style="width:6em;">
<option value=""></option>
<option value="1">
Impressions
</option>
                            <option value="2">
Clicks
</option>
</select>
</td>                     
<td>
<input type="text" name="quantity[]" id="quantity_1" size="5" />
</td>
                     
<td>
<input type="text" name="budget[]" id="budget_1" size="5" />
</td>
<td>
<input id="profit_1" name="profit[]" size="5" value="" class="validate[required,custom[onlyNumber],length[0,5]]" />
</td>
</tr>
<tr class="note">

                        <td colspan="4">
<textarea placeholder="Description" input type="text" class="note" name="description[]" id="description_1" rows="3" cols=2 WRAP=nowrap></textarea>
</td>
</tr>
        </table>
      </div>

<script type="text/javascript">
var s1= document.getElementById("channels_1");
var s2 = document.getElementById("types_1");
onchange(); //Change options after page load
s1.onchange = onchange; // change options when s1 is changed

function onchange() {
    <?php foreach ($channels_arr as $ca) {?>
        if (s1.value == '<?php echo $ca; ?>') {
            option_html = "";
            <?php if (isset($types_arr[$ca])) { ?> // Make sure position is exist
                <?php foreach ($types_arr[$ca] as $value) { ?>
                    option_html += "<option><?php echo $value; ?></option>";
                <?php } ?>
            <?php } ?>
            s2.innerHTML = option_html;
        }
    <?php } ?>
}
</script>
<script type="text/javascript">
var s3= document.getElementById("channels_1");
var s4 = document.getElementById("types_1");
onchange(); //Change options after page load
s3.onchange = onchange; // change options when s3 is changed

function onchange() {
    <?php foreach ($channels_arr as $ca) {?>
        if (s3.value == '<?php echo $ca; ?>') {
            option_html = "";
            <?php if (isset($types_arr[$ca])) { ?> // Make sure position is exist
                <?php foreach ($types_arr[$ca] as $value) { ?>
                    option_html += "<option><?php echo $value; ?></option>";
                <?php } ?>
            <?php } ?>
            s4.innerHTML = option_html;
        }
    <?php } ?>
}
</script>


    <div id="add_remove_btns">
<input type="button" id="btnAdd" value="Add record" />
      <input type="button" id="btnDel" value="Remove record" />
      <input type="button" id="btnAdd" class="show-note" onclick="javascript: $('.note').show();$('.show-note').hide();" value="Show details" />
<input type="button" id="btnAdd" class="note" onclick="javascript: $('.note').hide();$('.show-note').show();" value="Hide details" />
    </div>
</body>
</html>