无法在 2 模式中禁用标题 select2

Question

I have 2 modal at same page using select2. I need to remove title on hover select2 in modal select form. I have tried

  $('.select2-selection__rendered').hover(function () {
        $(this).removeAttr('title');
    });

to remove the hover, but it only works in 1 modal. In the other modal at the same page, it still show hover title.

Here's the script modal 1

               <div class="form-group" id="form-class-1" style="margin-top: -10px">
                    <div class="row">
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <label for="class">Class *</label>
                                    <div class="row">
                                        <div class="col">
                                            <select id="class" class="form-control" name="class" style="width: 100%">
                                            <option value="" selected disabled>-- Choose Class --</option>
                                            <?php
                                                foreach ($class $c)
                                                {
                                                    echo '<option value="'.$c->id.'">'.$c->class_name.' </option>';
                                                }
                                            ?>
                                            </select>
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Here's the script modal 2

      <div class="form-group" id="form-class-2" style="margin-top: -10px">
                    <div class="row">
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <label for="class">Class*</label>
                                    <div class="row">
                                        <div class="col">
                                            <select id="clas" class="form-control" name="clas" style="width: 100%">
                                            <option value="" selected disabled>-- Choose Class --</option>
                                            <?php
                                                foreach ($class $c)
                                                {
                                                    echo '<option value="'.$c->id.'">'.$c->class_name.' </option>';
                                                }
                                            ?>
                                            </select>
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Every help is appreciated.

Answer 1

With your JS condition it only select the modal where it's hover because of $(this)

$('.select2-selection__rendered').hover(function () {
     $(this).removeAttr('title');
});

you should change it to $( class of modal1 and modal2 ).removeAttr('title');

also why the two modal have the same id in the same page id="form-kelas1" ?

id should be unique per page.