Django, unable to filter all items under one or more categories attached to it using dynamic bootstrap 5 nav pills using many to many relationship

Question

Given the files below am unable to filter all items relating to one category or more than one category.

Example:

let items = A, B, C, D

categories = 1, 2, 3, 4

items in category 1 = A and B

items in category 2 = C and D

category 3 and 4 are not having any items attached to them, they should return empty

Have a look at the files and kindly guide below

models.py

class Category(models.Model):
    name = models.CharField()

class Item(models.Model):
    name = models.CharField()
    category = models.ManyToManyField(Category)

views.py

def filter_item(request):
    template = 'template.html'
    cat = Category.objects.all()
    context = {'cat': cat, }
    return render(request, template, context)

template.html

<ul class="nav nav-tabs" id="myTab" role="tablist">
    {% for c in cat %}
    <li class="nav-item" role="presentation">
        <button class="nav-link {% if  c.id == '{{ c.id }}' %} active {% endif %}" id="{{ c.name|slugify }}-tab" data-bs-toggle="tab" data-bs-target="#{{ c.name|slugify }}" type="button"
            role="tab" aria-controls="{{ c.name|slugify }}" aria-selected="true">{{ c.name }}</button>
    </li>
    {% endfor %}
</ul>
<div class="tab-content" id="myTabContent">
    {% for c in cat %}
    {% for i in c.item_set.all %}
    <div class="tab-pane fade {% if i.category.id == c.id %} show active {% endif %}" id="{{ i.name|slugify }}" role="tabpanel" aria-labelledby="{{ i.name|slugify }}-tab">{{ i.title }}</div>
    {% endfor %}
    {% endfor %}
</div>

What i want to do

1. Allow users to add dynaminc categories ( would like to add dynamic sub categories too)
2. Allow users to add items and attach it to one or more than one category
3. Allow users to click between different categories and see related items in tabpanel using bootstrap nav pill
4. Allow the categories to be in a slide so that a user can slide through hidden categories

What have done and how it works

Have used {% if c.id == '{{ c.id }} %}' to check is the id clicked is same had tried {% if c.id == c.id %} only the tab not to work

The nav pill tabpanel only shows one item returned from each category being clicked despite having other items in it

I would like to develop something like this, make categories slide and have prev and next controls as shown here

plain bootstrap 5.html

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

Kindly note

1. How well can one add or remove active class in class="nav-link active"
2. Same to show and active in class="tab-pane fade show active"