increment id when adding new line in table

increment id when adding new line in table

hello everyone. need your help for advices on jquery code;
when i add a new line to table, the selection.change() dont work anymore. i thinks i have to change ID ( increment ) for each element in table  when i an adding a new line to table: tr , select input
how fixe this problem. and how call it in selection.change()  script
 thanks

here his my code,
  1. <HTML>
    <HEAD>
        <TITLE> exos </TITLE>
        <script type="text/javascript" src="jquery.js"></script>
       
    </HEAD>
    <BODY>

    <button id ="add_line" class="add">+</button>
    <table id ="matable">
        <tr id ="row_1">      
                <TD  id="optioncell"  valign="bottom" style="margin-bottom:0px">
               
        <SELECT id="selection" name="selection" style="position:relative; margin-bottom:Opx bottom:0px;" >
              <OPTION  id="select0" value="">Selectionner un element</OPTION>
              <OPTION  id="select1" data-zone="ra" value="Test1">Test1</OPTION>
              <OPTION  id="select2" data-zone="rb"  value="Test2">Test2</OPTION>
              <OPTION  id="select3" data-zone="rc" value="Test3">Test3</OPTION>
        </SELECT>
                
                </TD>
                <TD valign="top" style="margin-bottom:0px">
               
    <TABLE id="table1" width="350px" border="1"  cellpadding="0" >
       
        <TR id="ra" style="display:none" valign="bottom">
                <TD id="ca">ZONE 1</TD>
                <TD  style="border:none"><INPUT type="button" value="X"  onClick="$('#ra').toggle();$('#select1').toggle();"  /></TD>
        </TR>
           
           
        <TR id="rb" style="display:none" valign="bottom">
                <TD id="cb">ZONE 2</TD>
                <TD  style="border:none"><INPUT type="button" value="X"  onClick="$('#rb').toggle();$('#select2').toggle();"  /></TD>
        </TR>
           
           
        <TR id="rc" style="display:none" valign="bottom">
                <TD id="cc">ZONE 3</TD>
                <TD  style="border:none"><INPUT type="button" value="X"  onClick="$('#rc').toggle();$('#select3').toggle(); "  /></TD>
        </TR>       
       
        </TABLE>
           
                </TD>
            <td><button class="remove">x</button></td>
        </tr>
    </table>    

        <script type="text/javascript" >   
     
    $('.add').on('click', function() {
            [
                '<tr id ="row_1"><TD  id="optioncell"  valign="bottom" style="margin-bottom:0px"><SELECT id="selection" name="selection" style="position:relative; margin-bottom:Opx bottom:0px;" >',
    '<OPTION  id="select0" value="">Selectionner un element</OPTION><OPTION  id="select1" data-zone="ra" value="Test1">Test1</OPTION><OPTION  id="select2" data-zone="rb"  value="Test2">Test2</OPTION><OPTION  id="select3" data-zone="rc" value="Test3">Test3</OPTION></SELECT></TD><TD valign="top" style="margin-bottom:0px">',          
    '<TABLE id="table1" width="350px" border="1"  cellpadding="0" ><TR id="ra" style="display:none" valign="bottom"><TD id="ca">ZONE 1</TD> <TD  style="border:none"></TD></TR>',
    '<TR id="rb" style="display:none" valign="bottom"><TD id="cb">ZONE 2</TD><TD  style="border:none"></TD></TR>',
    '<TR id="rc" style="display:none" valign="bottom"><TD id="cc">ZONE 3</TD><TD  style="border:none"></TD></TR>',       
    '</TABLE></TD><td><button class="remove">x</button></td></tr>' 
            ].join('')
        ); 
    });
     
    $('table').on('click', '.remove', function() {
       var $this = $(this);
     
       $this.closest('tr').remove();  
    });
     </script>
        <script type="text/javascript">
            $("#selection").change(function(e) {
            var theOption = $(this).find("option:selected");
            $('#'+ $(theOption).data("zone")).toggle();
            $('#'+ $(theOption).attr("id")).hide();
            $('#select0').attr('selected', 'selected');
        });
        </script>  
    </BODY>
    </HTML>