Why does my button work, but when I make it an input field it doesn't?

Question

if (valueInput == jsyl) {
    var correctBtn = $('<button/>', {
        'class': 'btn btn-success buttonCorrect',
        'type': 'button',
        'id': "button" + CBC++,
        'html': valueInput
    });
    $(this).replaceWith(correctBtn);
    S.playRight();
    S.addRight();
}

the code above is the code that works successfully (bare in mind it is not ALL the code). the code underneath is what I am trying to replace for the correctBtn variable. But whenever I use the button it displays the valueInput aswell, but when I do the exact same thing with the input field it does remain an input field and it does show that I have filled out a word, but it doesn't display it. To give you an idea: As if the text color is white and the background white aswell. You do see there is something filled out, but you cannot see it visual.

var correctInput = $('<input/>', {
    'class': 'form-control ss',
    'type': 'text',
    'id': 'button' + CBC++,
    'html': valueInput
});

what should be done to achieve such thing?

The complete function looks like this: (please note that the variables used are from the correctBtn ), but i'm trying to change the button to an input field.

function prepareCheck() {
  $.getJSON('json_files/jsonData_' + ID + '.json', function(json) {
       $(document).on('change', '.syl-input', function() {
           var rowCounter = $(this).parent().parent().parent().parent().attr('id');
           var inputCounter = $(this).attr('id');
           var jsyl = json.main_object.main_object.exercises[rowCounter].syllables[inputCounter];
           var jsylall = json.main_object.main_object.exercises[rowCounter].syllables;
           var valueInput = $(this).val();

       if (valueInput == jsyl) {
           var correctBtn = $('<button/>', {
              'class': 'btn btn-success buttonCorrect',
              'type': 'button',
              'id': "button" + CBC++,
              'html': valueInput
          });
          $(this).replaceWith(correctBtn);
              S.playRight();
              S.addRight();
       }
    })
}

Answer 1

You are trying to add an input element and assigning html to it. per definition input elements cannot contain other html.

You probably want to use value instead:

var correctInput = $('<input/>', {
    'class': 'form-control ss',
    'type': 'text',
    'id': 'button' + CBC++,
    'value': valueInput
});