How to make custom controls for four sliders that are rendered by for loop?

Question

JavaScript

Hey!
There is a bx slider for which I want to render controls. The slider is generated by the loop, there are four sliders in total (at the moment). The controls are set by assigning an id, but I don't know how to change the id with each loop, so it turns out that on the joxi.ru/RmzzWj1FW7nqRm screen , controls from all sliders are stuffed into the first slider.

$('.allmedsdeps').bxSlider({
                    slideWidth: 64,
                    minSlides: 2,
                    maxSlides: 7,
                    slideMargin: 10,
                    pager: false,
                    nextSelector: '#alldepsnext',
                    prevSelector: '#alldepsprev',
                    nextText: '<i class="fa fa-arrow-right"></i>',
                    prevText: '<i class="fa fa-arrow-left"></i>'
                });

<div class="col-md-12">
                                <h4>Направления:
 
                                    <a class="btn btn-xs btn-default hidewhensm" id="alldepsprev"></a>
                                    <a class="btn btn-xs btn-default hidewhensm" id="alldepsnext"></a>
                                    <a href="{% url 'all_departments' %}" class="btn btn-xs btn-primary"> ВСЕ
                                        <span class="badge">
                                            {{ departments|length }}
                                        </span>
                                    </a>
                                </h4>
                                <div class="hidewhensm">
                                <div class="allmedsdeps">
                                {% if departments %}
                                {% for dep in departments %}
                                    {% for mcenter in dep.where.all %}
                                        {% if mcenter.title == center.title %}
 
                                                <div class="slide">
                                                    <a href="{% url 'department_details' pk=dep.pk %}">
                                                        <img src="{{ dep.logo.url }}" title="{{ dep.title }}" class="navbarshadow">
                                                    </a>
                                                </div>
 
                                        {% endif %}
                                    {% endfor %}
                                {% endfor %}
                                </div>
                                </div>
 
                                {% else %}
                                    <div class="col-md-6">
                                        Извините, произошло что-то странное и отделения не отображаются, скорее,
                                        свяжитесь с нами через<a href="{% url 'contact' %}"> контактную форму</a>.
                                    </div>
                                {% endif %}
 
                            </div>