JSFiddle - React, Tailwind, and code Playground

JavaScript

var result = $('<div><input type="hidden" /></div>');
$(result).find('input').val('test');
alert($(result).html());
console.log($(result).html());
// Expected output: <input value="test" type="hidden">
// Output: <input value="test" type="hidden">
// THIS ONE IS CORRECT


var output = $('<div><textarea>Error</textarea></div>');
$(output).find('textarea').val('test');
alert($(output).html());
console.log($(result).html());
// Expected output: <textarea>test</textarea>
// Output: <textarea>Error</textarea>

var result = $('<div><textarea></textarea></div>');
$(result).find('textarea').attr('value', 'test');
alert($(result).html());
console.log($(result).html());
// Expected output: <textarea>test</textarea>
// Output: <textarea value="test"></textarea>

var result = $('<div><input type="text" /></div>');
$(result).find('input').val('test');
alert($(result).html());
console.log($(result).html());
// Expected output: <input value="test" type="text">
// Output: <input type="text">