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

LVL 20
chaitu chaituAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
$(document).on("change", "select[id=allemployees]", function() {
     if($(this).attr("selectedIndex") == 1) { // if second item (Country) in the dropdown in selected
          var theRow = $(this).closest("tr"); // get row of the dropdown
          var employeeValue = theRow.find("[id=employeeValue]");
          employeeValue.val("country");
          var secondTextbox = theRow.find(":text:eq(1)");
          secondTextbox.val("state");
          var thirdTextbox = theRow.find(":text:eq(2)");
          thirdTextbox.val("city");
     }
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
chaitu chaituAuthor Commented:
its not working.all text boxes  are not in the same row.one text in first row,2nd text box in 2nd row and so on..
0
leakim971PluritechnicianCommented:
So post a complete table to see what you really have
0
chaitu chaituAuthor Commented:
please see my original post .when select drop down value it will display dynamic rows.
0
leakim971PluritechnicianCommented:
I see a table and two rows, I can't imagine your dynamic row, post them
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.