如何在JavaScript中处理上传之前的图像预览？代码不能在同一页上工作两次

Question

我正在尝试构建一个web应用程序，可以允许用户在上传之前预览图像，代码工作良好，但如果我复制并粘贴在同一页上，它只能工作一个部分。例如，我将相同的代码放入两个单独的div标记中，其中一个div标记用于web应用程序，而第二个div标记用于应用程序的移动版本。即使我试图更改id，javascript仍然无法加载。

下面是我的代码

<div class="web_version">
           <form action="" method="POST" enctype="multipart/form-data">
             <div class="form-group">
                 <textarea name="answer" id="" class="form-control" placeholder="Type your answer here....."></textarea>
              </div>   <br>
                 <input type="file"  accept="image/*" name="file" id="file"  onchange="loadImage(event)" style="display: none;">
                 <label for="file" style="cursor: pointer;">Photo<img src="my-img.png" alt="" width="40"></label>
                <img id="input" width="200" />

                <script>
                   var loadImage = function(event) {
                     var image = document.getElementById('input');
                     image.src = URL.createObjectURL(event.target.files[0]);
                  };
                </script>
                   <button type="submit" name="solution" class="btn btn-primary">Answer</button><br>
           </form>
        </div>

        <!-- Below is the code which is for the mobile version -->
        <div class="mobile_version">
           <form action="" method="POST" enctype="multipart/form-data">
             <div class="form-group">
                 <textarea name="answer" id="" class="form-control" placeholder="Type your answer here....."></textarea>
              </div>   <br>
                 <input type="file"  accept="image/*" name="file" id="file"  onchange="loadImage(event)" style="display: none;">
                 <label for="file" style="cursor: pointer;">Photo<img src="my-img.png" alt="" width="40"></label>
                <img id="input" width="200" />

                <script>
                   var loadImage = function(event) {
                     var image = document.getElementById('input');
                     image.src = URL.createObjectURL(event.target.files[0]);
                  };
                </script>
                   <button type="submit" name="solution" class="btn btn-primary">Answer</button><br>
           </form>
        </div>