Why does select2 only apply to the last element?

Question

JavaScript

Good day,
I have several selects and I want to use select2 for all of them

This is how the html looks like

<select class="select2 form-control" multiple="multiple" data-select2-id="select2-with-tags">
  <option>1</option>
</select>
<select class="select2 form-control" multiple="multiple" data-select2-id="select2-with-tags">
  <option>1</option>
</select>
<select class="select2 form-control" multiple="multiple" data-select2-id="select2-with-tags">
  <option>1</option>
</select>
<select class="select2 form-control" multiple="multiple" data-select2-id="select2-with-tags">
  <option>1</option>
</select>

But when initialized by class, select2 will only apply to the last drop-down list, I initialize like this Tell me what I'm doing wrong
$(".select2").select2()

Answer 1

Use different attribute valuesdata-select2-id