Get 5 images with preview and delete using jquery

Question

I want the user to be able to enter up to 5 photos in the program and not to be able to enter more than that, and these images should be with a preview and also be able to delete the images before uploading, and I can do this with jquery. Thank you for helping me. My codes are as follows

enter code here

const preview = (file) => {
  const fr = new FileReader();
  fr.onload = () => {
    const img = document.createElement("img");
    img.src = fr.result;  // String Base64 
    img.alt = file.name;
    document.querySelector('#preview').append(img);
  };
  fr.readAsDataURL(file);
};

document.querySelector("#files").addEventListener("change", (ev) => {
  if (!ev.target.files) return; // Do nothing.
  [...ev.target.files].forEach(preview);
});

enter code here

const preview = (file) => {
  const fr = new FileReader();
  fr.onload = () => {
    const img = document.createElement("img");
    img.src = fr.result;  // String Base64 
    img.alt = file.name;
    document.querySelector('#preview').append(img);
  };
  fr.readAsDataURL(file);
};

document.querySelector("#files").addEventListener("change", (ev) => {
  if (!ev.target.files) return; // Do nothing.
  [...ev.target.files].forEach(preview);
});

#preview img { max-height: 100px; }

<input id="files" type="file" accept="image/*" multiple>
<div id="preview"></div>

I want the number of input files to be limited and also to be able to have a delete button in the preview of the images. After entering, for example, 5 images, the add file button should be disabled