dropdown click working on one page but not on another even though its the same component that these page load and same javaScript file
Here's the component
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Please Select A Fabric Range</a>
<ul class="dropdown-menu">
{% for fabricRange in fabricRanges %}
<li>
<a class="nav-link dropdown-item" id="tab-{{ fabricRange.id }}" data-bs-toggle="tab" data-bs-target="#tabpane{{fabricRange.id}}" type="button" role="tab" aria-controls="tabpane-{{fabricRange.id}}" aria-selected="true">{{fabricRange.title}}</a>
</li>
{% endfor %}
</ul>
</li>
And JS
$(".dropdown-menu").on("click", "a.nav-link.dropdown-item", function() {
console.log("clicked")
$(this).parents(".nav-item.dropdown").find("a.dropdown-toggle").html($(this).html())
})
I have used it in three pages, two works, one doesn't. the console.log() also works fine on the two pages but no response in third. Please Help