Проблема с созданием Javascript идентичных строк с входными данными

Question

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

Проблема в том, что я создаю новую строку в JavaScript. Строка создана отлично. Тем не менее, я думаю, что проблема начинается с ввода файла, не имеющего новый идентификатор. Итак, я попытался бросить его в какой-то цикл с подсчетом, а затем назначить этому файлу ввод числа подсчета при каждом нажатии кнопки добавления строки. Я с треском провалился.

Вот посмотрите на JS:

/* add image */
$(document).ready(function() {
var clicks = 0;

$("#buttons .addimage").live('click', function() {
    // Code between here will only run when the a link is clicked and has a name of addimage
    $("table#dataTable tr:last").after('<tr><td><input type="checkbox" name="chk"/></td><td><span class="file-wrapper"><input type="file" name="photo" id="photo" /><span class="button">Choose a Photo</span></span></td><td></td><td><select name="imagetype" id="imagetype" class="required"><option value="thumbnail">Thumbnail</option><option value="other">Other</option></select></td></tr>');
        return false;

    });
});

Таблица HTML:

<table id="dataTable">
<!-- All attributes will be sorted alphabetically. Default should be sorted by Status. Errors should be on top -->

<thead>
  <tr>
    <!-- Table Header -->

    <th>Select</th>

    <th>File Name</th>

    <th>File Size</th>

    <th>File Type</th>
  </tr>
</thead>

<tbody>
  <tr>
    <!-- First Record  / Dynamically populated/For mock up purposes only -->

    <td><input type="checkbox" name="chk" /></td>

    <td><span class="file-wrapper"><input type="file" name="photo" id="photo" />
    <span class="button">Choose a Photo</span></span></td>

    <td></td>

    <td><select name="imagetype" id="imagetype" class="required">

      <option value="thumbnail">
        Thumbnail
      </option>

      <option value="other">
        Other
      </option>
    </select></td>
  </tr>
</tbody>

Итак, вы заметите, что файл JS динамически не создает новый идентификатор ввода файла. Как бы я поступил так? Думаю ли я об этом правильно?