Use same function to expand checkbox select list

I have two select lists with checkboxes and I want to use same function showCheckboxes to manage them to avoid code repeating but having problems with selecting the right checkbox list, it doesnt work by id:

    <div class="multiselect">
    <div class="selectBox" id="select1" onclick="showCheckboxes(this.id)">
        <select>
            <option>Select deliverer</option>
        </select>
        <div class="overSelect"></div>
    </div>
    <div id="deliverer_checkboxes" style="height:100px;overflow:auto;">
      <% @deliverers.each do |deliverer|  %>
          <label for="<%= deliverer.id %>"><%= check_box_tag "deliverer_user_ids[]", deliverer.id %> <%= deliverer.name %></label>
      <% end %>
    </div>
  </div>

  <div class="multiselect">
    <div class="selectBox" id="select2" onclick="showCheckboxes(this.id)">
        <select>
            <option>Select shopper</option>
        </select>
        <div class="overSelect"></div>
    </div>
    <div id="shopper_checkboxes" style="height:100px;overflow:auto;">
      <% @shoppers.each do |shopper|  %>
          <label for="<%= shopper.id %>"><%= check_box_tag "shopper_user_ids[]", shopper.id %> <%= shopper.name %></label>
      <% end %>
    </div>
  </div>
  <%= f.submit 'Search', class: 'btn btn-success' %>
<% end %>
</div>

<script type="text/javascript">
var expanded = false;
  function showCheckboxes(clicked_id) {
      var checkboxes = document.getElementById(clicked_id);
      if (!expanded) {
          checkboxes.style.display = 'block';
          expanded = true;
      } else {
          checkboxes.style.display = 'none';
          expanded = false;
      }
  }
</script>

<style>
    .multiselect {
        width: 200px;
        float:left;
    }
    .selectBox {
        position: relative;
    }
    .selectBox select {
        width: 100%;
        font-weight: bold;
    }
    .overSelect {
        position: absolute;
        left: 0; right: 0; top: 0; bottom: 0;
    }
    #deliverer_checkboxes {
        display: none;
        border: 1px #dadada solid;
    }
    #deliverer_checkboxes label {
        display: block;
    }
    #deliverer_checkboxes label:hover {
        background-color: #1e90ff;
    }
    #shopper_checkboxes {
        display: none;
        border: 1px #dadada solid;
    }
    #shopper_checkboxes label {
        display: block;
    }
    #shopper_checkboxes label:hover {
        background-color: #1e90ff;
    }
</style>