通过ID操纵元素

Question

我正在为输入文件创建一个插件，我创建了所有内容，但是没有考虑在屏幕上进行多个输入的可能性，因此有必要改为从元素ID中操纵元素。这样一来，一个输入中的操作就不会影响屏幕上的所有其他输入。

下面是到目前为止的代码，当通过元素ID通知时，我无法使其正常工作。

function bs_input_file() {
  // TODO: add function to hide remove button when file not informed
  const inputElement = $(".input-file").find('input');
  const inputId = inputElement.map(function (index, dom) {
                       return dom.id
                  });
  buttonInspec(inputId);

  function buttonInspec(id) {
    $("#" + id).find("button.btn-reset").addClass("hidden");
    var element = $("#" + id).find('input');
    element.on("change input propertychange", function() {
      console.log("changed!")
      if (element.val() != "") {
        $("#" + id).find("button.btn-reset").removeClass("hidden");
      }
    });
  }
  // Necessary to put ID below also
  $(".input-file").before(
    function() {
      if (!$(this).prev().hasClass('input-ghost')) {
        var element = $("<input type='file' class='input-ghost' style='visibility:hidden; height:0'>");
        element.attr("name", $(this).attr("name"));
        element.change(function() {
          element.next(element).find('input').val((element.val()).split('\\').pop());
        });
        $(this).find("button.btn-choose").click(function() {
          element.click();
        });
        $(this).find("button.btn-reset").click(function() {
          element.val(null);
          $(this).parents(".input-file").find('input').val('');
        });
        $(this).find('input').css("cursor", "pointer");
        $(this).find('input').mousedown(function() {
          $(this).parents('.input-file').prev().click();
          return false;
        });
        return element;
      }
    }
  );
}

bs_input_file();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-md-8 col-md-offset-2">
  <h3>Example</h3>
    <form method="POST" action="#" enctype="multipart/form-data">
      <!-- COMPONENT START -->
      <div class="form-group">
        <div class="input-group input-file" name="Fichier1">
            <input id="fileInput0" type="text" class="form-control" placeholder='Select file...' />			
                <span class="input-group-btn">
                  <button class="btn btn-secondary btn-reset" type="button"><em class="glyphicon glyphicon-trash"></em></button>
                <button class="btn btn-default btn-choose " type="button"><em class="glyphicon glyphicon-folder-open"></em> Search...</button>
            </span>
        </div>
      </div>
      <div class="form-group">
        <div class="input-group input-file" name="Fichier2">
            <input id="fileInput1" type="text" class="form-control" placeholder='Select file...' />			
                <span class="input-group-btn">
                  <button class="btn btn-secondary btn-reset" type="button"><em class="glyphicon glyphicon-trash"></em></button>
                <button class="btn btn-default btn-choose " type="button"><em class="glyphicon glyphicon-folder-open"></em> Search...</button>
            </span>
        </div>
      </div>
      <!-- COMPONENT END -->
    </form>
  </div>
</div>