JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">Hello <input type='text' id="child" value='world' />
I also have a <select><option>drop</option><option>down</option></select></div>
</div>
<button id="separateEvent">Get HTML.</button>
<br>
<p>The HTML for #parent is:</p>
<textarea id="parentsHtml" style="width:95%; height: 100px;"></textarea>
<p>The value of #child is:</p>
<textarea id="childsValue" style="width:95%; height: 100px;"></textarea>

JavaScript

$("#separateEvent").click(function() {
    $("#child").prop("defaultValue", function() {
        return this.value;
    })

    $("select option").prop("defaultSelected", function() {
        return this.selected;
    });
    $("#parentsHtml").val($("#parent").html() + "\r\n@" + $.now());
    $("#childsValue").val($("#child").val() + "\r\n@" + $.now());
});