Вместо того, чтобы превращаться в кнопки, мой ряд просто исчезает

У меня следующая проблема: всякий раз, когда поля ввода проверяются и правильно заполняются, они должны превращаться в зеленые кнопки, однако всякий раз, когда происходит проверка, и они должны превращаться в зеленые кнопки, они просто исчезают. Я console.info() зеленые кнопки, и это возвращает мне "undefined". Посмотрите на картинку, а затем на первые 3 поля ввода:

теперь посмотрим на второй ПОСЛЕ проверки:

как видите, они исчезают. Я проверил элемент и не могу их найти.

Как выглядит мой код:

$.map(exercise.syllables, function (syllable, j) { 
        if (!syllable || !syllable.trim().length) {
       // If it doesn't exist or is an empty string, return early without creating/appending elements
           return;
      }

        var innerSylCol = $('<div/>', {
            class: 'col-md-3 inputSyllables'
        });

        var sylInput = $('<input/>', {
            'type': 'text',
            'class': 'form-control syl-input',
            'name':  +c++,
            'id': +idsyll++
        }).on('blur', function() {
            var cValue = $(this).val();

            if (cValue === "") {
               return;
            }

            if (cValue === syllable) {
                correctSylls.push(cValue);
                console.info(correctSylls);
            }

            if (exercise.syllables.length === correctSylls.length) {
                $(this).closest('.syll-row').find('input.syl-input').replaceWith(getCorrectBtn(cValue));
              //  console.info(getCorrectBtn(cValue));
                S.addRight();
                S.playRight();
          } else if (cValue !== syllable){
                $(this).css({'color':'#e00413'});
                S.playWrong();
                S.addWrong();
             }
          });

функция, в которой я создаю кнопку:

function getCorrectBtn(value) {
var correctBtn = $('<button/>', {
    'class': 'btn btn-success buttonCorrect',
    'type': 'button',
    'id': "button" + CBC++,
    'value': value
});
}

И весь CSS, который может быть связан с моими полями ввода:

input[type = "text"] {
font-size: 150%;
margin-top: 1vh;
transition: color 1s;
}

.btn {
margin: 0;
display: inline-block;
height: 38px;
margin: 5px;
outline: none !important;
}


input {
width:100%;
padding:5px;
outline: none !important;
text-align: center;
}