Multiple chosen-select in a single template causing problems

Question

I am trying to achieve this where Select projects is a multi-select dropdown menu and Filter Results is a collapse button, which when clicked has another three multi-select dropdown menus. I am using chosen-select for implementing the multi-select dropdown menus.

My Select projects is working fine and my Filter results collapse button is also working. But within the collapse button, the three dropdowns are not working (as shown in the image). When I remove the chosen-select from my first dropdown, I can see selection box working fine but its not a dropdown anymore. I also tried renaming the class in select to some other name but its still not working.

Also, if seen closely, there are lines in the collapse section where the selection box should be present, if I click this, I can see the line extending but its width is zero.

Please help me, I tried multiple things, but no luck. Below is the code. Thanks in advance.

    <div class="container">
        <div class="col-md-5" style="margin: 30px;">
            <h3 style="font-variant: small-caps;">Select Projects:</h3>
            <form id="selectProject" role="search" method="get" action="{% url 'select_projects' %}">
                <select name="params[]" data-placeholder="Choose projects" class="chosen-select" multiple tabindex="4">
                    {% for project in project_names %}
                        {% if project in display_selected %}
                            <option value="{{ project }}" selected="selected"> {{ project }}</option>
                        {% else %}
                            <option value="{{ project }}"> {{ project }} </option>
                        {% endif %}
                    {% endfor %}
                </select><br/>
                <label for="submit"></label><button id="submit" type="submit" class="btn btn-default" style="padding: 5px 40px;">Submit</button>
            </form>
        </div>
    </div>

    <div><br /></div>

    <div class="container">
        <div class="col-md-5" style="margin: 30px;">
            <div class="row">
                <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#filterParam">
                    Filter Results
                </button>
            </div>

            <div class="collapse" id="filterParam">
                <form id="selectFilters" role="search" method="get" action="{% url 'select_projects' %}">
                    <div class="form-group"><div><br /></div>
                        <select name="fruit[]" data-placeholder="Choose fruits" multiple tabindex="4" style="width: 200px;">
                            <option> apple </option>
                            <option> mango </option>
                            <option> grapes </option>
                        </select><div><br /></div>
                        <select name="color[]" data-placeholder="Choose colors" class="chzn-select" multiple tabindex="4" style="width: 200px;">
                            <option> red </option>
                            <option> orange </option>
                            <option> green </option>
                        </select><div><br /></div>
                        <select name="toppings[]" data-placeholder="Choose toppings" class="chosen-select" multiple tabindex="4" style="width: 200px;">
                            <option> cheese </option>
                            <option> olives </option>
                            <option> peppers </option>
                        </select><div><br /></div>
                    </div>
                    <label for="submitFilters"></label><button id="submitFilters" type="submit" class="btn btn-default" style="padding: 3px 15px;">Refresh</button>
                </form>
            </div>
        </div>
    </div>

<script src="{% static 'app/js/chosen.jquery.js' %}"></script>
<script>
    $('.chosen-select').chosen();
    $('.chzn-select').chosen();
</script>

Answer 1

Fixed the issue with this change: $('.chzn-select').chosen({width: '100%'});