jquery - 複数のタグに異なるリンクを挿入する方法

Question

ユーザーがページ上に独自の画像ギャラリーを作成できるようにするためのコードを考え出しました。ユーザーが独自のリンクを配置できるようにして、作成した各 img タグ内のテキスト領域にそれらのリンクを表示して、コード全体をコピーして自分のページなどに貼り付けられるようにします。ただし、貼り付けたリンクを使用して各入力のコンテンツを「取得」し、テキストエリアセクションのタグに入れる方法は考えられません。常に最初の入力の内容が表示されます。何か助けてください。:) これまでに思いついたコードは次のとおりです。

 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>