Sujet : Incrementer dynamiquement id des element dans un tableau

Bonjour,
je suis nouveau dans la programmation avec jquery,
j'ai un soucis avec ce code,
jaimerai gerer l'ajout et suppresion dynamique des lignes d'un tableau, 
mais lors de l'ajout les id des elements a linterieur du tableau devront s'ajouter de ''1''
Exemple <TR id=''row_1"> devrait passer <TR id=''row_2"> pour la seconde ligne de la facon pour les select et input si possible.
ceci ds le soucis de pouvoir les gérer distinctement.
Merci

<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();   
});