continued drop down boxes until

I am looking for my script to accept a percentage in a drop down box, after the initial selection I want to calculate the remaining percentage and present the user with another drop down box, this would continue until there was a value of 0 left in the last box

here is my code so far, the first box works but after i have created it I lose the trigger to fire the code again ,

Am I going about this the correct way? and can anyone suggest how I can correct the maths if the first drop box value is changed, Im not looking for someone to write code and scripts for me just some sound pointers on where to go with this.

and here is the code

                <script src="jquery.js"></script>
            <script> 

            $(document).ready(function(){

            $("#choice").change(function() { 


                valper = $(this).val() ;

                valueLeft = 100 - valper;

                newline = "<tr bgcolor='#666666'><td>&nbsp;</td> "
                newline += "<td><select  id='choice'> " ; 

                for( i=valueLeft; i >0; i--) {
                    newline += "<option value=" + i + ">" + i + " % </option> " ;
                }

                newline += "</select></td>  <td>&nbsp;</td> </tr> " ; 

                $('#selector').append(newline)


            }); 

            });


            </script> 

            <table width="500" border="1" cellspacing="1" cellpadding="1" bgcolor="#CCCCCC" align="center">
              <tr>
                <td width="50">top</td>
                <td>&nbsp;</td>
                <td width="50">&nbsp;</td>
              </tr>

             <tbody id='selector' > 
              <tr bgcolor="#666666" >
              <td>&nbsp;</td>
              <td>
                 <select  id="choice" name='1' >
                    <?php
                         for ( $counter = 100 ; $counter > 0; $counter -= 1) {       
                         echo "<option value='$counter'>$counter%</option> " ; 
                         开发者_JAVA技巧};
                    ?>
                </select></td>
              <td>&nbsp;</td>
              </tr>
              </tbody>

              <tr>
                <td>Bottom</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>

            </table>

jQuery events do not fire for elements created after event registration. Either register the event handler manually on the new box or use live():

$("#choice").live('change', function() {