how to make 2 inputs perform the same function?

Question

I am basing myself on this tutorial for uploading images. The problem is that I have 2 inputs that have to do the same thing. in the first it goes up wonderfully, in the other it doesn't. I already changed ids and classes but it's still the same. I don't know what is wrong with me. I have a very basic knowledge of js so it is difficult for me to understand the JS code that appears

$(document).ready(function() {
  document.getElementById('pro-image').addEventListener('change', readImage, false);

  $(".preview-images-zone").sortable();

  $(document).on('click', '.image-cancel', function() {
    let no = $(this).data('no');
    console.log({
      no
    });
    $(".preview-image.preview-show-" + no).remove();
  });
});

var num = 4;

function readImage() {
  if (window.File && window.FileList && window.FileReader) {
    var files = event.target.files; //FileList object
    console.log({
      files
    });
    var output = $(".preview-images-zone");
    console.log({
      output
    });

    for (let i = 0; i < files.length; i++) {
      var file = files[i];
      if (!file.type.match('image')) continue;

      var picReader = new FileReader();
      console.log({
        picReader
      });

      picReader.addEventListener('load', function(event) {
        var picFile = event.target;
        console.log({
          picFile
        });
        var html = '<div class="preview-image preview-show-' + num + '">' +
          '<div class="image-cancel" data-no="' + num + '">x</div>' +
          '<div class="image-zone"><img id="pro-img-' + num + '" src="' + picFile.result + '"></div>' +
          '<div class="tools-edit-image"><a href="javascript:void(0)" data-no="' + num + '" class="btn btn-light btn-edit-image">edit</a></div>' +
          '</div>';
        console.log({
          html
        });
        output.append(html);
        console.log({
          html
        });
        num = num + 1;
        console.log({
          num
        });
      });

      picReader.readAsDataURL(file);
      console.log({
        picReader
      });
    }
    $("#pro-image").val('');
  } else {
    console.log('Browser not support');
  }
}

$(document).ready(function() {
  document.getElementById('pro-images').addEventListener('change', readImage, false);

  $(".preview-images-zones").sortable();

  $(document).on('click', '.image-cancel', function() {
    let no = $(this).data('no');
    console.log({
      no
    });
    $(".preview-image.preview-show-" + no).remove();
  });
});

var num = 4;

function readImage() {
  if (window.File && window.FileList && window.FileReader) {
    var files = event.target.files; //FileList object
    console.log({
      files
    });
    var output = $(".preview-images-zones");
    console.log({
      output
    });

    for (let i = 0; i < files.length; i++) {
      var file = files[i];
      if (!file.type.match('image')) continue;

      var picReader = new FileReader();
      console.log({
        picReader
      });

      picReader.addEventListener('load', function(event) {
        var picFile = event.target;
        console.log({
          picFile
        });
        var html = '<div class="preview-image preview-show-' + num + '">' +
          '<div class="image-cancel" data-no="' + num + '">x</div>' +
          '<div class="image-zone"><img id="pro-img-' + num + '" src="' + picFile.result + '"></div>' +
          '<div class="tools-edit-image"><a href="javascript:void(0)" data-no="' + num + '" class="btn btn-light btn-edit-image">edit</a></div>' +
          '</div>';
        console.log({
          html
        });
        output.append(html);
        console.log({
          html
        });
        num = num + 1;
        console.log({
          num
        });
      });

      picReader.readAsDataURL(file);
      console.log({
        picReader
      });
    }
    $("#pro-images").val('');
  } else {
    console.log('Browser not support');
  }
}

.preview-images-zone {
  width: 100%;
  border: 1px solid #ddd;
  min-height: 180px;
  padding: 5px 5px 0px 5px;
  position: relative;
  overflow: auto;
}

.preview-images-zone>.preview-image:first-child {
  height: 185px;
  width: 185px;
  position: relative;
  margin-right: 5px;
}

.preview-images-zone>.preview-image {
  height: 90px;
  width: 90px;
  position: relative;
  margin-right: 5px;
  float: left;
  margin-bottom: 5px;
}

.preview-images-zone>.preview-image>.image-zone {
  width: 100%;
  height: 100%;
}

.preview-images-zone>.preview-image>.image-zone>img {
  width: 100%;
  height: 100%;
}

.preview-images-zone>.preview-image>.tools-edit-image {
  position: absolute;
  z-index: 100;
  color: #fff;
  bottom: 0;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
  display: none;
}

.preview-images-zone>.preview-image>.image-cancel {
  font-size: 18px;
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
  margin-right: 10px;
  cursor: pointer;
  display: none;
  z-index: 100;
}

.preview-image:hover>.image-zone {
  cursor: move;
  opacity: .5;
}

.preview-image:hover>.tools-edit-image,
.preview-image:hover>.image-cancel {
  display: block;
}

.preview-image:hover>.tools-edit-image {
  display: none;
}

.ui-sortable-helper {
  width: 90px !important;
  height: 90px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="form-group">
  <input type="file" name="fotosCarro" class="form-control" multiple="" id="pro-image" click="$('#pro-image').click()" accept="image/*" required="">
  <div class="preview-images-zone">
</fieldset>
<div class="preview-images-zone"></div>


<fieldset class="form-group">
  <input type="file" name="garantiaCarro" class="form-control" multiple="" id="pro-images" click="$('#pro-images').click()" accept="image/*" required="">
  <div class="preview-images-zones">
</fieldset>
<div class="preview-images-zones"></div>