通过JS更新具有唯一ID的表单输入

Question

所以我已经为此工作了几天，我碰壁了，需要帮助/反馈。

我的目标是这个。我有一个表格，可以在页面上无数次。用户可以浏览图像，然后单击所需的图像，然后在该区域部分的页面上插入两件事。在字段中放置图像ID，并在其上方将图像放置在屏幕上进行显示。

此页面仅适用于已登录的用户。

我已经尽一切可能使我工作，但我不确定它是否安全或正确的方法。我是自学成才的，最近才刚开始使用JS，因此如果有人可以指出正确的方向，请这样做。我觉得我已经使它变得比原来更复杂了。

function pageBrowseImageFunction(selector, id, url) {
    var areaSection = selector;
		document.getElementById('insertImagePath-'+areaSection).innerHTML = "";
		document.getElementById(areaSection).value=id;
		document.getElementById("insertImagePath-"+areaSection).innerHTML="<img style='max-height: 100px; max-width: 500px;' src='" + url + "' /><br /><small>You selected image ID: " + id+ "</small><hr />";
}

<h4>Section 1</h4>
<form class="updateImage">
<div class="col-md-12" id="insertImagePath-insertImageID1"></div><div class="clearfix"></div>

<input type="text" class="form-control" id="insertImageID1" name="image_id" value=""/>
          
<a onclick="pageBrowseImageFunction('insertImageID1', '1', 'https://i.imgur.com/TSL3U5f.jpg')" id="thebtn" class="btn btn-white btn-xs" data-dismiss="modal">Insert Image</a>
</form>

<hr />

<h4>Section 2</h4>
<form class="updateImage">
<div class="col-md-12" id="insertImagePath-insertImageID2"></div><div class="clearfix"></div>

<input type="text" class="form-control" id="insertImageID2" name="image_id" value=""/>
          
<a onclick="pageBrowseImageFunction('insertImageID2', '2', 'https://i.imgur.com/wz3fYLf.jpg')" id="thebtn" class="btn btn-white btn-xs" data-dismiss="modal">Insert Image</a>
</form>
<hr />

<h4>Section 3</h4>
<form class="updateImage">
<div class="col-md-12" id="insertImagePath-insertImageID3"></div><div class="clearfix"></div>

<input type="text" class="form-control" id="insertImageID3" name="image_id" value=""/>
          
<a onclick="pageBrowseImageFunction('insertImageID3', '3', 'https://i.imgur.com/7qOk0wk.jpg')" id="thebtn" class="btn btn-white btn-xs" data-dismiss="modal">Insert Image</a>
</form>