How to add dynamic id to text boxes without having to put text boxes in the loop?

See more:

Javascript

PHP

jQuery

I'm trying to assign id's to some text fields that's getting created dynamically in a loop. And after the series of text boxes are created, I want to call a function on master text box, which reflects the data entered in one text box to all other text boxes.


*Master text box where the value will be entered*

<input class="form-control" type="text" name="add" id="add" onkeyup="sync()">

*script for reflecting data in all text boxes entered in the master text box*

function sync()
    {
     var n1 = document.getElementById('add0');
     var n2 = document.getElementById('add1');
     var n3 = document.getElementById('add2');
     var n4 = document.getElementById('add3');
     var n5 = document.getElementById('add4');
     var n6 = document.getElementById('add5');
     var n7 = document.getElementById('add6');
     var n8 = document.getElementById('add7');
     n8.value = n7.value = n6.value = n5.value = n4.value = n3.value = n2.value = n1.value;
    }

*The div which is in the loop that consists of the text boxes where data will be reflected from the master text box*

<?php  while($res = pg_fetch_assoc($result)){ ?>
<div class="col-md-2 show-hide">
<input type="text" value="<?php echo $res['size']; ?> " readonly style="background-color: #F5F5F5;" class="form-control"/>
<div id="addition"></div>  <--- OUTPUT IS SUPPOSED TO BE GENERATED HERE
<select class="form-control">
<option>25%</option>
<option>50%</option>
<option>100%</option>
</select><br> 
</div><?php }?>

What I have tried:

*script for assigning dynamic id's*
<pre>for( var i=0; i<8; i++)    //i<9 because that's the maximum number of text 
                               //fields to be created is 8.     
    {        
    $('#addition').append('<input class="form-control" type="text" name="add" id="add'+ i +'" />');
    }

The problem is that this script works fine in the fiddle, but output is not getting generated in the actual program. And when I use the script inside the loop in the actual program, it creates a series of text boxes only in the first iteration of the while loop.
Is there a way only create the id's dynamically and append it in the input area, instead of putting the input itself in the loop like I have done?