jquery не видит идентификатор в разметке

Использую Material Bootstrap Design. Появилась небольшая проблема во время использования js-скрипта. HTML:

<div class="ml-auto text-right mt-5">
     <button id="btnClear" type="button" class="btn btn-light btn-sm ">Очистить</button>
     <button type="button" class="btn btn-info btn-sm ">Добавить</button>
</div>

JS:

$(document).ready(function () {
$('#btnFirst').click(function (e) {
    e.preventDefault();
    $('#collapseFirstStep').collapse('hide');
    $('#collapseTwoStep').collapse('show');
});
$('#btnTwo').click(function (e) {
    e.preventDefault();
    $('#collapseTwoStep').collapse('hide');
    $('#collapseThreeStep').collapse('show');
});
$('#btnClear').click(function (e) {
    e.preventDefault();
    $('#collapseThreeStep').collapse('hide');
    $('#collapseFirstStep').collapse('show');
});
});

С таким кодом, скрипт не может увидеть элемент с идентификатором "btnClear", но если изменить на "btn1", например, то заработает. Не могли бы подсказать почему так происходит?

UPD Заливаю картинку, чтобы не было вопросов про еще один идентификатор в html: