jQuery重复错误与Django模板的选择列表

Question

我有一个工作中的select下拉版本，显示了客户可以选择的面料列表。

现在，我想为多选选项提供两个按钮。但是，仅更改模板和jquery代码中的div类仅能成功完成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();
});
});