无法在表中添加动态行-javascript

我正在尝试构建一种动态表。 基本上，我希望用户输入一些字段，在“添加行”按钮上，用户输入的这些输入将填充下表，依此类推，他可以输入他需要的任意多行。然后从表行中提取数据并调用服务进行上传

我所做的是成功地创建了添加行功能。但有一个输入，用户在其中选择图像，然后单击添加行按钮，问题是所有行上的图像都替换为以前的图像

var inc=1；
函数添加（tableID）{
控制台日志（公司）；
var educationInstitute=$（“#educationInstitute”）.val（）；
var educationQualification=$（“#educationQualification”）.find（“：selected”）.val（）；
var educationAdmDate=$（“#educationAdmDate”）.val（）；
var educationGraDate=$（“#educationGraDate”）.val（）；
//预览图像（“教育图像”，公司）；
//var educationImage=$（“#educationImage”）.val（）；
var fullPath=document.getElementById（'educationImage'）。值；
如果（完整路径）{
var startIndex=（fullPath.indexOf（'\\'）>=0？fullPath.lastIndexOf（'\\'）：fullPath.lastIndexOf（'/'）；
var filename=fullPath.substring（startIndex）；
if（filename.indexOf（'\\'）==0 | | filename.indexOf（'/'）==0）{
filename=filename.substring（1）；
}
}
filename.replace（//g'，）；
filename=filename.slice（0，-4）；
警报（文件名）；
预览图像（“教育图像”，文件名）；
var markup=“+educationInstitute+”“+educationQualification+”+
EducationAdmindate+“”+educationGraDate+“”；
$（“#educationTable tbody”）.append（标记）；
}
功能del（世界其他地区）{
$（“表tbody”）.find（'input[name=“record”]”）。每个（函数（）{
如果（$（this）.is（“：checked”））{
$（this.parents（“tr”）.remove（）；
}
});
}
函数预览图像（id、文件名）{
if（document.getElementById（id）.files[0]）{
控制台日志（“ID”）；
var reader=new FileReader（）；
reader.onload=函数（e）{
//console.log（如target.result）；
$（'.previewImage'+filename）.attr（'src'，e.target.result）；
inc+=1；
控制台日志（公司）；
}
reader.readAsDataURL（document.getElementById（id.files[0]）；
}
}

教育详情
添加表
---资格---
选择1
选择2
检查
机构名称
资格
入院日期
毕业日期
度扫描图像

另一个选项是在

add

上复制输入，并将其附加到

td

中的行中。此字段也可以隐藏，当您想要获取文件时，可以使用jquery获取所有相应的输入

  var markup = `
  <tr>
    <td><input type='checkbox' name='record'></td>
    <td> ${educationInstitute}</td>
    <td> ${educationQualification}</td>
    <td> ${educationAdmDate}</td>
    <td> ${educationGraDate}</td>
    <td class='file_holder'>
      <img class='previewImage${filename}' src='' /> 
      // append the corresponding input file here for later use
    </td>
   </tr>`;
  $("#educationTable tbody").append(markup);
  $("#educationImage").clone().appendTo("#educationTable tbody tr:last-child .file_holder");

var标记=`
${educationInstitute}
${educationQualification}
${EducationAdmindate}
${educationGraDate}
//在此处附加相应的输入文件以供以后使用
`;
$（“#educationTable tbody”）.append（标记）；
$（“#educationImage”）.clone（）.appendTo（“#educationTable tbody tr:last child.file_holder”）；

---

下面是示例

代码正在运行，我首先添加了错误的代码。你能在这里制作这个示例吗？这是链接，我在fiddle中看不到任何问题。“图像”列包含与文件名相关的不同类。有什么问题？