Solved: how to change ids for dynamic rows when user select drop down

how to change id's of the text boxes when use select drop down value to 'Country';

when user select 'Country' then 3 dynamic rows will be displayed.

how to. change the id's of the text boxes[Employee Value].first text box id should change to 'country,2nd text box id be 'state' and 3rd textbox city.

if user select other option then text box id should be as it is..

       
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>



var sample=
[
    {
        "company": 123,
       
        "organizationMap": {
            "Country": [
                "country",
                "state",
                "City"
            ]
        }
    }
];

$(document).ready(function(){



				$(document).on('click',"#addrow",function(event){
			
			
                        var $tr = $(this).closest('tr');
                        var allTrs = $tr.closest('table').find('tr');

                        var lastTr = allTrs[allTrs.length-1];
                        var $clone = $(lastTr).clone();

                        $clone.find('td').each(function(){

                            var el = $(this).find(':first-child');
                            var name = el.attr('name') || null;
							  var id = el.attr('id') || null;
                          if(name !=null && name.indexOf("[") > -1)
                                   {
										var number= parseInt(name.substring(name.indexOf("[")+1, name.indexOf("]")));
										number++;
										var tillfirstsquare= name.substring(0,name.indexOf("[")+1);
										var tillfirsttolastsquare =name.substring(name.indexOf("]"),name.length);
										var result=tillfirstsquare+number+tillfirsttolastsquare;
										el.attr('name', result);
										 el.attr('id', id+parseInt(number));
                                    }

                        });

                        $clone.find('input:text').val('');
                        $tr.closest('table').append($clone);

					
                });

			

				$(document).on('change',"#allemployees",function(event){
			
								
				$('#addattributedivtable > tbody  > tr:gt(1)').remove();
				
				if( $('#addattributedivtable > tbody  > tr:last').find('td:last-child').find("#addrow").length ==0)
				{
				   $('#addattributedivtable > tbody  > tr:last').find('td:last-child').append("<input type='button' id='addrow' name='addrow' value='addrow' />");
				}
					
    						   
							if($.isArray(sample[0].organizationMap[$(this).find('option:selected').text()]))
							{
										
									for(var i=0;i<sample[0].organizationMap[$(this).find('option:selected').text()].length;i++)
									{
									
									   $( "#addrow" ).trigger( "click" );
									   
									  $("input[name='employeeChange["+i+"].employeeValue']").val(sample[0].organizationMap[$(this).find('option:selected').text()][i]);
									  }
									 
							}
							else{
										$("input[name='employeeChange[0].employeeValue']").val(sample[0][$(this).find('option:selected').text()]);
											$( ".datepick" ).datepicker();	 
							  }

                       });

			
	 });
</script>

<table border="1" class="table table-striped table-hover  table-bordered" id="addattributedivtable">

<tbody><tr>
<td name="deleterow" id="deleterow" class="deleterow"></td>

<td><label class="col-md-3 control-label" >Employee Names</label>
</td>


<td>
<label class="col-md-3 control-label" >Employee Value</label>
</td>

<td class="addrow">&nbsp;</td>

</tr>

<tr>
<td name="deleterow" class="deleterow"></td>

<td>
<select id="allemployees" name="employeeChange[0].name" class="form-control">
<option value="0" selected="">Please Select Employee</option>
<option value="6">Country</option>
<option value="6">company</option>
</select>
</td>


			
<td><input id="employeeValue" name="employeeChange[0].employeeValue" size="45" type="text" >
			</td>

<td>
<input type="button" id="addrow" name="addrow" value="addrow">
</td>

</tr>
                                                                                                                </tbody></table>

Open in new window