我面临的问题是，每当我从第二行上传文件时，它会更改第一行的文本字段，而第二行似乎不会相应地更新

<form action="Fruits" method="Post" enctype="multipart/form-data">
    <table id="myTable">
    <c:forEach items="${fruits}" var="val" varStatus="count">
    <thead>
    <tr>
      <th>Fruit</th>
      <th>Color</th>
    </thead>
    <tbody>
      <td><input type="text" name="name" id="name" value="${val.name}"></td>
      <td>
        <select class="form-control dropdown" id="color" name="color">
          <option id="colors">${val.color}</option>
        </select>
        <input type="file" id="image" var="image" value="image"/>
        <label for="image" value="Upload">Upload</label>
      </td>
    </tbody>
    </c:forEach>
    </table>
    <button type="button" class="btn btn-default json-editor-btn-add" onclick="myFunction()">Add</button>
</form>

因此，每当我想更新我的第二行下的新文件，在点击'上传'，它更新的文本为第一行，而不是第二行。这是我的JSP代码的功能。请协助我这一点

$(function () {
        $('input[type=file]').change(function () {
            var t = $(this).val();
            var file_name = t.substr(12, t.length);
            var labelText = 'File : ' + t.substr(12, t.length);
            document.getElementById("colors").innerHTML = file_name;
            $(this).prev('label').text(labelText);
            $(this).prev('label').css({
                "color": "black"
            });
        });
    });