Why can't i use select 2 more than 1

HTML

<form enctype="multipart/form-data" action="{{ $ACTION }}/save-create" method="POST">
                    @csrf
                    <!-- BEGIN: Modal Body -->
                    <div class="modal-body grid grid-cols-12 gap-4 gap-y-3">
                        <div class="col-span-12"> <label for="modal-form-6" class="form-label">User</label>
                            <select id="modal-form-6 " class="select1 form-select" name="user_id" required>
                                <option disabled selected >-- Pilih User --</option>
                                @foreach ($users as $user)
                                    <option value="{{ $user->id }}">
                                        {{ $user->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-span-12"> <label for="modal-form-6" class="form-label">Project
                                Manager</label>
                            <select id="modal-form-6" class="select1 form-select" name="project_manager_id" required>
                                <option disabled selected >-- Pilih Project Manager --</option>
                                @foreach ($projectManagers as $projectManager)
                                    <option value="{{ $projectManager->id }}">
                                        {{ $projectManager->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-span-12"> <label for="modal-form-1" class="form-label">Nama
                                Project</label>
                            <input name="name" id="modal-form-1" type="text" class="form-control"
                                placeholder="inputkan nama project" minlength="2" required>
                        </div>

                        <div class="col-span-12"> <label for="modal-form-6" class="form-label">Bohir</label>
                            <select id="modal-form-6" class="select1 form-select" name="bohir_id" required>
                                <option disabled selected >-- Pilih Bohir --</option>
                                {{-- <option>Bohir Belum Di tentukan </option> --}}
                                @foreach ($bohirs as $bohir)
                                    <option value="{{ $bohir->id }}">
                                        {{ $bohir->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-span-12"> <label for="modal-form-1" class="form-label">Nilai Anggaran</label>
                            <input name="nilai_anggaran" id="modal-form-1" type="number" class="form-control"
                                placeholder="Nilai Anggaran" minlength="2" required>
                        </div>

                        <div class="col-span-12"> <label for="modal-form-1" class="form-label">Tahun
                                Anggaran</label>
                            <input name="fiscal_year" id="modal-form-1" type="number" class="form-control"
                                placeholder="inputkan Tahun Anggaran" minlength="2" required>
                        </div>

                        <div class="col-span-12"> <label for="modal-form-1" class="form-label">Tanggal
                                Kontrak</label>
                            <div class="relative">
                                {{-- <div
                                    class="absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 border text-gray-600 dark:bg-dark-1 dark:border-dark-4">
                                    <i data-feather="calendar" class="w-4 h-4"></i>
                                </div>  --}}
                                <input type="date" class=" form-control pl-12" name="start_contract">
                            </div>
                        </div>

                        <div class="col-span-12"> <label for="modal-form-1" class="form-label">Tanggal Akhir
                                Kontrak</label>
                            <div class="relative">
                                {{-- <div
                                    class="absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 border text-gray-600 dark:bg-dark-1 dark:border-dark-4">
                                    <i data-feather="calendar" class="w-4 h-4"></i>
                                </div>  --}}
                                <input type="date" class=" form-control pl-12" name="end_contract">
                            </div>
                        </div>

                        <div class="col-span-12"> <label for="modal-form-6" class="form-label">PT
                                Pemenang</label>
                            <select id="modal-form-6" class="select1 form-select" name="company_id" >
                                <option disabled selected value="">-- Kosongkan Jika Belum Di Tentukan --</option>
                                {{-- <option value="">PT Pemenang Belum Di Tentukan</option> --}}
                                @foreach ($users as $user)
                                <option value="{{ $user->id }}">{{ $user->name }}</option>

                                @endforeach
                            </select>
                        </div>

                        <div class="col-span-12"> <label for="modal-form-6" class="form-label">Principal</label>
                            <select id="modal-form-6" class="select1 form-select" name="principal_id" >
                                <option disabled selected value="">-- Kosongkan Jika Belum Di Tentukan --</option>
                                @foreach ($users as $user)
                                    <option value="{{ $user->id }}">
                                        {{ $user->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-span-12"> <label for="modal-form-6" class="form-label">Distributor</label>
                            <select id="modal-form-6" class="select1 form-select" name="distributor_id" >
                                <option disabled selected value="">-- Kosongkan Jika Belum Di Tentukan --</option>
                                @foreach ($users as $user)
                                    <option value="{{ $user->id }}">
                                        {{ $user->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- <div class="col-span-12 dropzone"> <label for="modal-form-1" class="form-label">File</label>
                            <div class="fallback"> <input name="file[]" type="file" multiple /> </div>
                            <div class="dz-message" data-dz-message>
                                <div class="text-lg font-medium">Drop files here or click to upload.</div>
                                <div class="text-gray-600"> This is just a demo dropzone. Selected files are <span
                                        class="font-medium">not</span> actually uploaded. </div>
                            </div>
                        </div> --}}

                        <div class="col-span-12"> <label for="modal-form-6" class="form-label">Status</label>
                            <select id="modal-form-6" class=" form-select" name="project_status_id" required>
                                <option disabled selected>-- Pilih status --</option>
                                @foreach ($statuses as $status)
                                    <option value="{{ $status->id }}">
                                        {{ $status->status }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <!-- END: Modal Body -->

                    <!-- BEGIN: Modal Footer -->
                    <div class="modal-footer text-right">
                        <button type="button" data-dismiss="modal"
                            class="btn btn-outline-secondary w-20 mr-1">Cancel</button>
                        <button type="submit" class="btn btn-primary w-20">Send</button>
                    </div>
                </form>

script

 @section('scripts')
        <script type="text/javascript">
            
            $(document).ready(function() {
                $('.select1').select2();
            });
           
        </script>
    @endsection

Try giving them unique IDs, you’ve ID’ed them all as “modal-form-6”. Then initialize each one with their ID, not a class:

$(’#modal-form-6’).select2();
// give the 2nd one the ID of “modal-form-7” for example, then:
$(’#modal-form-7’).select2();
// and so on for however many you need

1 Like