Добавление id к select2 jquery

Библиотека select2, добавляет 5 значений в инпут, но остальные 4 значения не распознаются. Как добавлять эти 4 значения к 1-му инпуту?

Код:

default.html:

было 5 инпутов:

  <select id="val1" list="val" multiple="multiple" class="form-control" name="value1">
      {% for val in values %}
      <option value= "{{val}}" style="color: red;">{{val}}</option>
    {% endfor %}
  </select>
  <select id="val2" list="val" multiple="multiple" class="form-control" name="value2">
      {% for val in values %}
      <option value= "{{val}}" style="color: red;">{{val}}</option>
    {% endfor %}
  </select>
  <select id="val3" list="val" multiple="multiple" class="form-control" name="value3">
      {% for val in values %}
      <option value= "{{val}}" style="color: red;">{{val}}</option>
    {% endfor %}
  </select>
  <select id="val4" list="val" multiple="multiple" class="form-control" name="value4">
      {% for val in values %}
      <option value= "{{val}}" style="color: red;">{{val}}</option>
    {% endfor %}
  </select>
  <select id="val5" list="val" multiple="multiple" class="form-control" name="value5">
      {% for val in values %}
      <option value= "{{val}}" style="color: red;">{{val}}</option>
    {% endfor %}
  </select>

нужен(и стало) 1 input:

  <select id="val1" list="val" multiple="multiple" class="form-control" name="val1">
      {% for val in values %}
      <option value= "{{val}}" style="color: red;">{{val}}</option>
    {% endfor %}
  </select>

js:

$(document).ready(function() {
    $('#val1').select2();
});
$(document).ready(function() {
    $('#val2').select2();
});
$(document).ready(function() {
    $('#val3').select2();
});
$(document).ready(function() {
    $('#val4').select2();
});
$(document).ready(function() {
    $('#val5').select2();
});

Помогите решить. Спасибо.