How can I remove a particular item using a popup?

Question

I have many items and I want to delete one of them but when I delete one item it turns out that it deletes the last item which exists based on ordering so, if I have 10 records of id which start from 1 to 10 record so, it will remove the item number 10 til if I remove item number 5 will remove the number 10. this case occurs because of popup but if I remove popup and delete the items directly it will remove with no mistake so, How can I remove a particular item using popup?

profile.html

        {% if request.user == profile.user %}
        <div class="col-lg-7 offset-lg-1 col-12">
            {% if profile.user.user_history.all.count != 0 %}
            <form method="post">
                {% csrf_token %}
                <div class="clear_all fl-left">
                    <input class="global_checkbox" type="checkbox" name="remove_all_history" id="remove_all_history">
                    <label for="remove_all_history" class="ml">Remove All</label>
                </div>
                <div class="fl-right">
                    <input type="submit" value="Remove" class="clear_button btn btn-danger invisible"/>
                </div>
            </form>
            {% else %}
                <p class="text-center">you have no history yet!</p>
            {% endif %}
            <div class="clearfix"></div>
            <div class="mt-6"></div>
            {% for history in history_pages %}
            {% if history.deleted_history == False %}
            <div class="history">
                <div class="row">
                    <div class="col-4">
                        <form method="post">
                        {% csrf_token %}
                        <input class="global_checkbox" type="checkbox" name="remove_one_history" id="remove_all_history">
                        <span class="ml-2">{{ history.history_time|time }}</span>
                        <div class="ml ml-4">{{ history.history_time|date:'d M Y' }}</div>
                        </form>
                    </div>
                    <div class="history-content col-7">
                        <p><strong>text:</strong> {{ history.history }}</p>
                        <p><strong>action:</strong> {{ history.action_option }}</p>
                        <p><strong>position:</strong>
                            {% if history.verb_option == "" %}
                                POS
                            {% else %}
                                {{ history.verb_option }}
                            {% endif %}
                        </p>
                    </div>
                    <form method="post" action="{% url 'accounts:remove_history' history.id %}">
                        {% csrf_token %}
                        <div class="history-list col-1">
                            <span class="fa fa-ellipsis-v" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
                            <div class="dropdown-menu">
                                <a type="button" class="dropdown-item" data-toggle="modal" data-target="#exampleModal">Remove this item</a>
                            </div>
                        </div>
                        {% include 'accounts/popup.html' %}
                    </form>
                </div>
            </div>
            {% endif %}
            {% endfor %}
        </div>
        {% endif %}

popup.html

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Warning!!</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Do you want to remove this history item?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-outline-danger">Remove</button>
      </div>
    </div>
  </div>
</div>

views.py

@login_required
def userProfile(request, slug=None):
    profile = None
    try:
        profile = Profile.objects.get(user__slug=slug)
        paginator = Paginator(profile.user.user_history.all(), 100)
        page_number = request.GET.get('page_number')
        history_pages = paginator.get_page(page_number)
    except:
        return redirect('accounts:index_404')
    return render(request, 'accounts/profile.html', {'profile': profile, 'history_pages': history_pages})


def remove_history(request, id=None):
    if id and id is not None:
        # History.objects.get(id=id)
        print(id)
    return redirect("accounts:profile", request.user.username)

Note: I tested the delete using print(id)

Answer 1

In your current code you have included popup.html mutliple times so when you click on a tag its not confirm which modal will get open has all are triggering exampleModal i.e :data-target="#exampleModal" .

So , to overcome this one way would be including only one modal and adding form tags around submit button . Then , whenever user click on a tag you can get action value from form where a tag has been clicked and then add this action value inside modal form tag .

Demo Code :

//on click of `a` tag
$(".dropdown-item").on("click", function() {
  //get closest form from `a` tag then get action from it
  var action_ = $(this).closest("form").attr("action");
  $("#exampleModal form").attr("action", action_) //add that action inside modal form tag
  console.log(action_)

})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="history">
  <div class="">
    <div class="">
      <form method="post">
        {% csrf_token %}
        <input class="global_checkbox" type="checkbox" name="remove_one_history" id="remove_all_history">
        <span class="">12:30</span>
        <div class="">12-04-21</div>
      </form>
    </div>
    <div class="history-content">
      <p><strong>text:</strong> Somethigs</p>
      <p><strong>action:</strong>Ok</p>
      <p><strong>position:</strong> POS

      </p>
    </div>
    <form method="post" action="{% url 'accounts:remove_history' 1 %}">
      <div class="history-list">
        <span class="fa fa-ellipsis-v" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
        <div class="dropdown-menu">
          <a type="button" class="dropdown-item" data-toggle="modal" data-target="#exampleModal">Remove this item</a>
        </div>
      </div>
      <!--remove this line  {% include 'accounts/popup.html' %}-->
    </form>
  </div>
</div>

<div class="history">
  <div class="">
    <div class="">
      <form method="post">
        {% csrf_token %}
        <input class="global_checkbox" type="checkbox" name="remove_one_history" id="remove_all_history">
        <span class="">12:32</span>
        <div class="">22-04-21</div>
      </form>
    </div>
    <div class="history-content">
      <p><strong>text:</strong> Somethigs2</p>
      <p><strong>action:</strong>Ok2</p>
      <p><strong>position:</strong> POS

      </p>
    </div>
    <form method="post" action="{% url 'accounts:remove_history' 2 %}">
      <div class="history-list">
        <span class="fa fa-ellipsis-v" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
        <div class="dropdown-menu">
          <a type="button" class="dropdown-item" data-toggle="modal" data-target="#exampleModal">Remove this item</a>
        </div>
      </div>
      <!--remove this line  {% include 'accounts/popup.html' %}-->
    </form>
  </div>
</div>




<!--just use only one modal no need to include it every time on your page-->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Warning!!</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <!--added form tag-->
      <form method="post" action="">
        <!--added csrf token-->
        {% csrf_token %}
        <div class="modal-body">
          Do you want to remove this history item?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-outline-danger">Remove</button>
        </div>
      </form>
    </div>
  </div>
</div>