Javascript与输入创建相同行的问题

Question

我有一个包含行的表。在该行中，有一个文件输入，其样式看起来像一个按钮。我需要用户选择图像，然后在同一行中输入有关该图像的一些信息。一旦他们这样做，如果他们需要添加另一个图像，他们将点击一个创建新行的按钮，其中包含一个新的文件输入等。

我遇到的问题是在创建新行的JavaScript中。该行创建正常。但是，我认为问题始于文件输入没有新ID。所以，我试图将它与某个循环一起计数，然后在每次点击添加行按钮时为该文件输入分配计数。我悲惨地失败了。

以下是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文件不会动态创建新的文件输入ID。我该怎么做呢？我是否正确地思考这个问题？