JSFiddle - React, Tailwind, and code Playground

by Sinful

HTML

<div id="work">
    <h1>Working input</h1>
</div>
<div id="fail">
    <h1>Failing input</h1>
</div>

CSS

html, body{font: 100 12px Arial, Helvetica; margin: 0px; padding: 0px;}
h1{font: 100 18px Trebuchet MS, Arial, Helvetica; margin: 0px 0px 5px 0px;}
div {margin: 10px 10px; background:#FAFAFA; border:1px solid #e4e4e4; padding: 10px 5px;}

JavaScript

var inputElementWork, inputElementFail;

inputElementWork = $('<input type="text" value="666"></input>');
inputElementFail = $(document.createElement('input')).attr({ 'type': 'text' }).val(666);
            
$('div#work').append(inputElementWork.clone());
$('div#fail').append(inputElementFail.clone());

setTimeout(function () {
    $('div#work').append(
        $('<p></p>').text('Working input value: ' + $('div#work').find('input[type=text]').val())
    );

    $('div#fail').append(
        $('<p></p>').text('Failing input value: ' + $('div#fail').find('input[type=text]').val())
    );
}, 250);