Fix my javascript - Image uploader

If I rearrange the images, it still uploads in the order initially chosen. For examples, [login to view URL] and [login to view URL] will upload as the first image [login to view URL] and the second image as 2.jpg. If I rearrange so that [login to view URL] is first, it still uploads [login to view URL] first. Also if I remove an image, it still uploads the image. Here is the javascript. <script> var files = []; // Global array to store the selected files in the order they were added function previewImages() { var previewDiv = $("#preview-images"); [login to view URL](); var selectedFiles = [login to view URL]($("#images")[0].files); // Convert to a regular array [login to view URL](...selectedFiles); // Store selected files in the global array for (let i = 0; i < [login to view URL]; i++) { var file = files[i]; var reader = new FileReader(); [login to view URL] = (function (file) { return function (e) { var img = $("<img>") .attr("src", [login to view URL]) .attr("alt", "Preview Image") .addClass("img-fluid mb-2 draggable-image"); var removeBtn = $("<span>") .addClass("remove") .text("\u00D7") // Unicode for the "times" symbol .click(function () { // Get the corresponding file to be removed var fileToRemove = file; // Remove the image when the remove button is clicked $(this).closest(".image-container").remove(); // Remove the file from the files array files = [login to view URL](function (f) { return f !== fileToRemove; }); }); var imageContainer = $("<div>").addClass("image-container"); [login to view URL](img).append(removeBtn); [login to view URL](imageContainer); }; })(file); [login to view URL](file); } } // Call the previewImages function when files are selected $("#images").on("change", previewImages); // Enable Drag and Drop functionality using jQuery UI $("#preview-images").sortable({ revert: true, }); $("#preview-images").disableSelection(); </script>