jQuery onload代码如何可重复用于缩略图2和3

$(window).on('load', function() {
  var files = $("input[type=file]");
  files.change(function(e) {
    if (this.files && this.files[0]) {
      let thumb = $(this).data('thumb');
      // let thumb = $(this).attr('data-thumb'); // alternative to above line.
      var reader = new FileReader();
      reader.onload = function(e) {
        $("." + thumb + " img").attr("src", e.target.result);
        $('.full-image img').attr("src", e.target.result);
      }
      reader.readAsDataURL(this.files[0]);
    }
  });
});

$(document).ready(function() {
  $('.box').click(function() {
    $('.full-image').html($(this).html());
    console.log(this);
  });
});

body {
  font-family: 'Poppins', Verdana, Arial, sans-serif;
}

fieldset {
  background-color: lavender;
  border: 10px solid darkblue;
  border-radius: 20px;
  margin: 20px auto;
  width: 720px;
}

legend {
  background-color: purple;
  border-radius: 10px;
  color: white;
  padding: 12px;
}

fieldset div {
  margin: 10px;
}

label {
  display: inline-block;
  text-align: right;
  vertical-align: top;
  width: 200px;
}

.container {
  width: 60%;
  overflow: hidden;
  margin: 100px auto;
}

.box {
  width: 100px;
  height: auto;
  padding: 10px;
}

.box {
  cursor: pointer;
}

.full-image {
  width: 580px;
  height: 580px;
  padding: 10px;
}

.col {
  float: right;
}

.full-image img {
  width: 100%;
  /* height: 100%; */
}

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

<title>Image Gallery App</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<fieldset>
  <legend>Your Images</legend>
  <div>
    <label for="avatar">Upload Your Image:</label>
    <input type="file" id="avatar1" name="avatar1" data-thumb='thumbnail-one' required="">
  </div>
  <div>
    <label for="avatar">Upload Your Image:</label>
    <input type="file" id="avatar2" name="avatar2" data-thumb='thumbnail-two' required="">
  </div>
  <div>
    <label for="avatar">Upload Your Image:</label>
    <input type="file" id="avatar3" name="avatar3" data-thumb='thumbnail-three' required="">
  </div>
</fieldset>

<div class="container">
  <div class="col">
    <div class="box thumbnail-one">
      <img src="https://http.cat/100" alt="Nature" style="width:100%">
    </div>
    <div class="box thumbnail-two">
      <img src="https://http.cat/405" alt="Snow" style="width:100%">
    </div>
    <div class="box thumbnail-three">
      <img src="https://http.cat/504" alt="Mountains" style="width:100%">
    </div>
  </div>
  <div class="col">
    <div class="full-image">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <img src="https://http.cat/100" id="expandedImg" />
    </div>
  </div>
</div>