而不是变成按钮，我的行消失了

Question

下一个问题是：每当检查输入字段并正确填写时，它们都应该变成绿色按钮，但是每当检查发生时，它们都应该变成绿色按钮，它们就会消失。我console.log()的绿色按钮向我返回了“未定义”。先看图片，然后看前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.log(correctSylls);
            }

            if (exercise.syllables.length === correctSylls.length) {
                $(this).closest('.syll-row').find('input.syl-input').replaceWith(getCorrectBtn(cValue));
              //  console.log(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;
}