I am trying to implement individual upload cancel using blueimp-jquery-fileupload in Django

have been trying to implement individual image file upload using blueimp_jquery_fileUpload. How can i get this done?. If i am to upload a single image, and cancel it, it does get cancelled however if its multiple images, it all cancels out.

This is my template code:

{% extends 'shared/base_profile.html'%}
{% load static %}
{% load crispy_forms_tags %}
{% block title %}
  Upload Property Pictures
{% endblock title %}
{% block content %}
  <div class="row">
      <form action="" method="POST" enctype="multipart/form-data">
          {% csrf_token %}
          <!-- {% if form %} -->
            <!-- {{ form|crispy }} -->
            <!-- <div class="col">
              {{ form.pictures }}
            </div> -->
          <!-- {% endif %} -->
            <div class="form-group">
                <label>Select file to upload.</label>
                <input type="file" class="form-control" id="fileupload" placeholder="Select file">
           </div>
           <input type="submit" value="Upload" id="submit" class="btn btn-success">
      </form>
      <div id="uploaded_files"></div>
      <!-- <div class="col-sm-9 m-auto">
        
      </div> -->
  </div>
{% endblock content %}

This is my javaScript code:

'use strict';

$(function (){

  function previewDataDetail(img,imgSize,imgName){
    return `
      <div class="col-sm-12" id="progress_img">
        <img src="${img}">
        <span>${imgSize}</span>
        
        <div class="value_hold" style="display:none">
        <p id="preview_name">${imgName}</p>
        
        </div>
        
        <button class="btn btn-dark">Cancel</button>

        <div class="progress">

          <div class="progress-bar progress-bar-striped progress-bar-animated" id="progress_bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style= "width:100%"></div>

        </div>

      </div>
    
    `
  }

  function abortUpload(e){
    e.preventDefault();
    var template = $(e.currentTarget).closest(
          '#progress_img'
        ),
        data = template.data('data') || {};
      data.context = data.context || template;
      if (data.abort) {
        data.abort();
      } else {
        data.errorThrown = 'abort';
        this._trigger('fail', e, data);
      }
  }

  $("#uploadTrigger").click(function(){
    // const url = "{% url 'property_pic' %}";
    // const csrf_token = $('input[name="csrfmiddlewaretoken"]').val();
    // $("#fileupload").attr('data-url', url);
    // $("#fileupload").attr('data-form-data', csrf_token);
    $("#fileupload").click()
  });
      $("#fileupload").fileupload({
          dataType: 'json',
          sequentialUploads: true,
          add: function(e,data){
            var previewImg = data.files[0];
            var previewUrl = URL.createObjectURL(previewImg);
            $("#formInput").append(previewDataDetail(previewUrl,previewImg.size,previewImg.name))
            data.context = $("#progress_img #progress_bar")
            data.submit();

            var jqXHR = data.submit().error(function (jqXHR, textStatus, errorThrown){
              if (errorThrown === 'abort'){
                alert('This upload has been cancelled')
              }
            })

            $("#progress_img button").click((e) => {
              e.preventDefault();
              jqXHR.abort()
              const snip = e.currentTarget.closest("#progress_img preview_name")
              console.log(snip);
             
              // data.originalFiles.forEach(i => {
              //   if(i.name == e.target.closest('.value_hold'))console.log(previewImg.name);
              // })

              // console.log(e.currentTarget.closest('#progress_img'));
              e.target.closest('#progress_img').remove()
            }) 
          },
          progress: function(e,data){
            var progress = parseInt((data.loaded / data.total) * 100, 10);
            // console.log(data.context.closesr("#progress-bar"))
            data.context.css("width", progress + "%");
            data.context.attr('aria-valuenow', progress + "%")
          },
          done: function(e, data){
            $("#progress_img").remove()
            if (data.result.is_valid){
              console.log('I got saved to the db')
            }else{
              const error = data.result.message
              console.log(error)
              if(error){
                $(`<p class="alert alert-danger">${error}</p>`).insertBefore($("#formInput"))
              }
              let replacer = $(".alert")
              if(replacer.length > 1){
                replacer.remove();
                $(`<p class="alert alert-danger">${error}</p>`).insertBefore($("#formInput"))
              }
            }
          }
      })
  })

The functionality where the image can be cancel is within the add option within the code and the data to be cancelled is accessed within the jqXHR object. And this is the link to the github page for the libraryblueimp_jquery_fileUpload