jquery - How to insert different links to multiple <img> tags -

i've come piece of code allowing users create own image gallery on page. want users able put own links , want links appear in textarea within each img tag they've created can copy whole code , paste e.g. on page. however, cannot think of way "grab" content of each input link paste , put in tag in textarea section. shows content of first input. help, please? :) here's code i've come far:

 image height: <input type="text" id="imgheight" /><br /><br />  image width:  <input type="text" id="imgwidth" /><br /><br />  number of images: <input type="text" id="imgno" /><br /><br />  <p id="additionalimgs"></p>     <input type="button" value="show code" id="result" onclick="abba()" /><br /><br />       <textarea rows="20" cols="60" id="output"></textarea>     <script>     $(document).ready(function(){         $("#result").click(function(){             var imgheight = $("#imgheight").val();             var imgwidth = $("#imgwidth").val();             var imgno = $("#imgno").val();             var text = '';             var y = 1;             for(i=0; i<imgno; i++){             var aaa = $("#additionalimgs input").val();             text += "<img src='"+aaa +"' width='"+imgheight+"' height='"+imgwidth+"' name='"+ y++ +"' />"; } $('#output').text(text);              });         }); $(document).ready(function(){             $("#imgno").change(function(){                 var imgno = $("#imgno").val();                 x = 1;                 var y = 1;                 var text = "image number: ";                 for(i=0; i<imgno; i++){                 $("#additionalimgs").append(text + y++ + ' link' + "<input type='text' name='"+ x++  +"'><br />")};                 });             });      </script> 

you need differentiate input fields generate.

try fiddle

the code copied below future reference. notice generated input fields have unique id called "field_#". , when want retrieve value, need value of field unique id also.

image height: <input type="text" id="imgheight" /> <br /> <br />image width: <input type="text" id="imgwidth" /> <br /> <br />number of images: <input type="text" id="imgno" /> <br /> <br /> <p id="additionalimgs"></p> <input type="button" value="show code" id="result" onclick="abba()" /> <br /> <br /> <textarea rows="20" cols="60" id="output"></textarea> <script>     $(document).ready(function() {         $("#result").click(function() {             var imgheight = $("#imgheight").val();             var imgwidth = $("#imgwidth").val();             var imgno = $("#imgno").val();             var text = '';             var y = 1;             (i = 0; < imgno; i++) {                 var aaa = $("#additionalimgs input#field_" + i).val();                 text += "<img src='" + aaa + "' width='" + imgheight + "' height='" + imgwidth + "' name='" + y+++"' />";             }             $('#output').text(text);          });          $("#imgno").change(function() {             var imgno = $("#imgno").val();             x = 1;             var y = 1;             var text = "image number: ";             (i = 0; < imgno; i++) {                 $("#additionalimgs").append(text + y+++' link' + "<input id='field_" + + "' type='text' name='" + x+++"'><br />")             };         });     }); </script>