Ошибка повторения JQuery для списка выбора с шаблоном Django

Question

У меня есть рабочая выпадающая версия выбора, которая показывает список тканей, которые клиент может выбрать.

Теперь я хотел иметь две из этих кнопок для опции множественного выбора.Но простое изменение класса div в шаблоне и коде jquery дало только 50% успеха.

Теперь пользователь может выбрать две ткани, но на моей первой кнопке выбора он повторяет список со второй.Вторая кнопка в порядке и отображается правильно.

Есть идеи?Приветствия

HTML-шаблон Django:

<label><u><b>Fabric - Large:</b></u></label>
   <div class="drop-down1">
        <select name="options" id="my_select">
          <option selected="selected">Select Fabric...</option>
          {% for item in fabric %}
             {% if item.availablity|stringformat:"s" == "available" %}
               <option value="{{item.name}}"
                   style="background-image:url({{item.fabric_cover.url}});">{{item.name}}</option>
             {% endif %}
         {% endfor %}
        </select>
      </div>

      <label><u><b>Fabric - Medium:</b></u></label>
      <div class="drop-down2">
           <select name="options" id="my_select">
             <option selected="selected">Select Fabric...</option>
             {% for item in fabric %}
                {% if item.availablity|stringformat:"s" == "available" %}
                  <option value="{{item.name}}"
                      style="background-image:url({{item.fabric_cover.url}});">{{item.name}}</option>
                {% endif %}
            {% endfor %}
           </select>
      </div>

Функция Jquery

jQuery().ready(function() {
// LARGE
jQuery('.drop-down1').append('<div class="button"></div>');
jQuery('.drop-down1').append('<ul class="select-list"></ul>');
jQuery('.drop-down1 select option').each(function() {
var bg = jQuery(this).css('background-image');
jQuery('.select-list').append('<li class="clsAnchor"><span value="' + jQuery(this).val() + '" class="' + jQuery(this).attr('class') + '" style=background-image:' + bg + '>' + jQuery(this).text() + '</span></li>');
});
jQuery('.drop-down1 .button').html('<span>' + jQuery('.drop-down1 select').find(':selected').text() + '</span>' + '<a href="javascript:void(0);" class="select-list-link"><i class="fa fa-arrow-circle-down"></i></a>');
jQuery('.drop-down1 ul li').each(function() {
if (jQuery(this).find('span').text() == jQuery('.drop-down1 select').find(':selected').text()) {
jQuery(this).addClass('active');
}
});
jQuery('.drop-down1 .select-list span').on('click', function()
{
var dd_text = jQuery(this).text();
var dd_img = jQuery(this).css('background-image');
var dd_val = jQuery(this).attr('value');
jQuery('.drop-down1 .button').html('<span>' + dd_text + '</span>' + '<a href="javascript:void(0);" class="select-list-link"><i class="fa fa-arrow-circle-down"></i></a>' + '<input type="hidden" name="fabric-field1" value='+dd_val+'>');
jQuery('.drop-down1 .select-list span').parent().removeClass('active');
jQuery(this).parent().addClass('active');
$('.drop-down1 select[name=options]').val( dd_val );
$('.drop-down1 .select-list li').slideUp();
});
jQuery('.drop-down1 .button').on('click','a.select-list-link', function()
{
jQuery('.drop-down1 ul li').slideToggle();
});

// MEDIUM
jQuery('.drop-down2').append('<div class="button"></div>');
jQuery('.drop-down2').append('<ul class="select-list"></ul>');
jQuery('.drop-down2 select option').each(function() {
var bg = jQuery(this).css('background-image');
jQuery('.select-list').append('<li class="clsAnchor"><span value="' + jQuery(this).val() + '" class="' + jQuery(this).attr('class') + '" style=background-image:' + bg + '>' + jQuery(this).text() + '</span></li>');
});
jQuery('.drop-down2 .button').html('<span>' + jQuery('.drop-down2 select').find(':selected').text() + '</span>' + '<a href="javascript:void(0);" class="select-list-link"><i class="fa fa-arrow-circle-down"></i></a>');
jQuery('.drop-down2 ul li').each(function() {
if (jQuery(this).find('span').text() == jQuery('.drop-down2 select').find(':selected').text()) {
jQuery(this).addClass('active');
}
});
jQuery('.drop-down2 .select-list span').on('click', function()
{
var dd_text = jQuery(this).text();
var dd_img = jQuery(this).css('background-image');
var dd_val = jQuery(this).attr('value');
jQuery('.drop-down2 .button').html('<span>' + dd_text + '</span>' + '<a href="javascript:void(0);" class="select-list-link"><i class="fa fa-arrow-circle-down"></i></a>' + '<input type="hidden" name="fabric-field2" value='+dd_val+'>');
jQuery('.drop-down2 .select-list span').parent().removeClass('active');
jQuery(this).parent().addClass('active');
$('.drop-down2 select[name=options]').val( dd_val );
$('.drop-down2 .select-list li').slideUp();
});
jQuery('.drop-down2 .button').on('click','a.select-list-link', function()
{
jQuery('.drop-down2 ul li').slideToggle();
});
});