Динамически создаваемые элементы

Всем привет!
Делаю добавление фотографий, с возможность выбора опций, от которых будет зависеть стоимость.
В зависимости от количества, у меня добавляются миниатюры и набор опций

Код (Text):

1.  
2. ...
3. var span = document.createElement('span');
4. span.innerHTML = ['<div class="paper">\
5.                   <select name="paperChoice[]" class="paperChoice">\
6.                       <option value="матовая">матовая</option>\
7.                       <option value="глянцевая">глянцевая</option>\
8.                   </select>\
9.                   <input type="text" name="cost[]" class="cost">\
10.                  </div>'].join('');
11. ...

Сейчас мучаю .on('change') , но максимум, что хотя бы реагирует - это вот

Код (Text):

1.  
2. $('.paper').on('change', '.paperChoice', function() {
3.     var cost = $(this).val()
4.     $('.cost').val(cost)
5. });

У меня не получается обращаться к name, тогда просто ничего не происходит.
И сейчас, где бы я не сменил опцию, значение поля cost будет меняться в каждом блоке, а хочется, чтобы они были суверенны

 

Спасибо, буду пробовать )

 

Подскажите, а как можно созданные поля поместить в массив, чтобы потом post'ом отправить?

Никак не пойму, как подступить

Сейчас у меня обособленно меняются значения, но с атрибутами name явно что-то не так

Код (Text):

1.  
2. <form class="photoForm" name="photoForm" method="POST" enctype="multipart/form-data">
3.     <input type="file" id="files" name="files[]" multiple/>
4.     <output id="list"></output>
5.     <input type="submit" class="submit">
6. </form>

Код (Text):

1.  
2. function handleFileSelect(evt) {
3.     var files = evt.target.files; // FileList object
4.     // Loop through the FileList and render image files as thumbnails.
5.     for (var i = 0, f; f = files[i]; i++) {
6.         // Only process image files.
7.         if (!f.type.match('image.*')) {
8.             continue;
9.         }
10.         var reader = new FileReader();
11.         // Closure to capture the file information.
12.         reader.onload = (function (theFile) {
13.             return function (e) {
14.                 $("#list").append(
15.                     $('<div/>').attr({'class': 'span4'}).append(
16.                         $('<img/>').attr({'class': 'thumb', 'src': e.target.result, 'title': escape(theFile.name)})
17.                         ).append(escape(theFile.name)).append(
18.                             $('<select/>').attr({'id': 'myDiv', 'name': 'paperChoice[]', 'class': 'paperChoice'}).append(
19.                                 $('<option/>').attr({'value': 'Матовая'}).append('Матовая'),
20.                                 $('<option/>').attr({'value': 'Глянцевая'}).append('Глянцевая')
21.                             ),
22.                             $('<input/>').attr({'type': 'text', 'name': 'info[]'})  
23.                         )
24.                                        
25.                 )
26.             };
27.         })(f);
28.  
29.             // Read in the image file as a data URL.
30.             reader.readAsDataURL(f);
31.         }
32.     }
33. document.getElementById('files').addEventListener('change', handleFileSelect, false);
34.  
35.  
36. $('#list').on('change', '[name="paperChoice[]"]',function(event) {
37.     $(this).parent().children('[name="info[]"]').val($(this).val())
38. });