Почему значок maxlength warnigClass отображается позади MODAL?

0

У меня проблема с модальным окном. Я использую максимальную длину, как показано ниже:

<div class='modal-body'>
    <div class="container-fluid"> 
        <div class='form-group '>
            <label>Country Id</label> 
            <span class="error-text GMCMHCountryId_error text-danger" style='float:right;'></span>
            <input type="text"  name='GMCMHCountryId' id='GMCMHCountryId' class='form-control few-options' maxlength="10" placeholder="Country Id" '>
        </div>
    </div>
</div> 

Определение нескольких опций приведено ниже.

$('input.few-options').maxlength({    
    alwaysShow: true,
    placement:"top-right",
    warningClass: "badge badge-secondary",
    limitReachedClass: "badge badge-warning"
});

Когда я помещаю курсор на текст Country Id, он показывает значок, но позади модального окна. Я хочу, чтобы значок отображался поверх модального окна рядом с вводимым текстом. Когда я использую тот же код без модального окна, я получаю этот значок правильно.

Любая помощь или предложение приветствуются.