Jquery change textbox values dynamically on Change after table row clone

Question

I have a sort of complex php,html script that I am using to create an interactive design. I am using a repeat table and i am basically cloning the contents of a particular table row and appending it to the end of the table. When I select a certain option in the select menu, the corresponding textfields get updated with the correct values. However cloned rows misbehave

What I'm asking is if there is a way to make this fields also change values. Here is the various code Code for adding/cloning a row. Please note the id details is the id of a table row

$("#addrow1").click(function(){
        //alert("It works");

        //$('#description tr:last').after('<tr>...</tr>');
        $('#details').clone().appendTo('#dailyexpense');    


            });

Code for changing the textfield and textbox values

$("#cities").live('change',function(){
var cityrates = $("#cities :selected").val();
var brkfstrates = (0.2 * cityrates).toFixed(1); 
$("#brkfasttxt").val(brkfstrates);
$("#brkfastchk").val(brkfstrates);
var lunchrates = (0.3 * cityrates).toFixed(1);
$("#lunchtxt").val(lunchrates);
$("#lunchchk").val(lunchrates);
var dinnerrates = (0.3 * cityrates).toFixed(1);
$("#dinnertxt").val(dinnerrates);
$("#dinnerchk").val(dinnerrates);
var incdntlrates = (0.2 * cityrates).toFixed(1);
$("#incidentltxt").val(incdntlrates);
$("#incidentlchk").val(incdntlrates);
});

My table row code for the one that gets loaded by the browser

<tr id="details">
      <td><label for="date"></label>
      <input style="background-color:#CCC;" type="text" name="date" id="date" /></td>
      <td><label for="cities"></label>
        <select name="cities" id="cities" style="background-color:#CCC; width:220px;">
        <?php           
 foreach($country as $makassi1){
 $selectcities = "SELECT City, Country, Rate FROM perdiem_rates WHERE Country =   '$makassi1'";
 $checkcity = mysql_query($selectcities)or die(mysql_error());
 $countcities = mysql_num_rows($checkcity);

 while($row=mysql_fetch_assoc($checkcity))
 {

     $countries = ($row['Country']);
     $names =($row['City']) ;
     $rate =($row['Rate']) ;
     $ratess=$countries."-".$names
     ?> 

 <option id="cityoptrates"  value="<?php echo $rate; ?>"> 
 <?php echo $ratess; ?>
 </option>
 <?php       
 }
 }          
         ?>
      </select></td>
      <td><input name="brkfastchk" type="checkbox" class="chkbox"  id="brkfastchk" />
        <label for="brkfasttxt"></label>
        <input style="background-color:#CCC;" name="brkfasttxt" type="text" id="brkfasttxt" size="5" readonly="readonly" />
      <label for="brkfastchk"></label></td>
      <td><input type="checkbox" name="lunchchk"  id="lunchchk" class="chkbox" />
        <label for="lunchtxt"></label>
        <input style="background-color:#CCC;" name="lunchtxt" type="text" id="lunchtxt" size="5" readonly="readonly" />
      <label for="lunchchk"></label></td>
      <td><input type="checkbox" name="dinnerchk"  id="dinnerchk" class="chkbox" />
        <label for="dinnertxt"></label>
        <input style="background-color:#CCC;" name="dinnertxt" type="text" id="dinnertxt" size="5" readonly="readonly" />
      <label for="dinnerchk"></label></td>
      <td><input type="checkbox" name="incidentlchk"  id="incidentlchk" class="chkbox" />
        <label for="incidentltxt"></label>
        <input style="background-color:#CCC;" name="incidentltxt" type="text" id="incidentltxt" size="5" readonly="readonly" />
      <label for="incdntchk"></label></td>
      <td colspan="2"><label for="daily_totals"></label>
      <input style="background-color:#CCC;" name="daily_totals" type="text" id="daily_totals" size="5" /></td>
    </tr>

As per the above my textfield value changing code works perfectly with the first initial row. The cloned rows don't work. The only one which works on the cloned rows is the select menu for selecting the cities. Help needed. Open to suggestions and improvements.

link to actual code in jsfiddle http://jsfiddle.net/NAafu/10/

Answer 1

In your case maybe you should also clone the events:

 $('#details').clone(true).appendTo('#dailyexpense');   

as stated in the documentation of clone()

EDIT - The problem perhaps is that you are using an id selector ( $("#cities").live ) which returns only one element. Ids should be unique on the page you should use a class instead