JSFiddle - React, Tailwind, and code Playground

HTML

<div id="output"></div>

<h2> Test Form </h2>
<form id="otherTest">
    
    <input type="text" name="otherthing" value="0987">
    
</form>

JavaScript

function log (message) { $('#output').append('<p>'+message+'</p>'); alert(message); }

var jObj = $('<form></form>');
jObj.append('<input type="text" name="something" value="12345" />');

log ($('input[name="something"]', jObj).val());
$('input[name="something"]', jObj).val('23456');
log ($('input[name="something"]', jObj).val());

alert(jObj);
                         
log ($('<p />').append(jObj).html());

var jObj2 = $('#otherTest');
log ($('input[name="otherthing"]', jObj2).val());
$('input[name="otherthing"]', jObj2).val('9876');
log ($('input[name="otherthing"]', jObj2).val());


// This will change the value of the input that is currently in the dom, but if we uncomment
// this next line then we will see that upon reappending the object the value is unchanged.
//log ($('<p />').append(jObj2).html());