JSFiddle - React, Tailwind, and code Playground

HTML

<div id="my">click button to test</div>

    <hr>
    <input type="hidden" id="in">

<br><br>
This shows that using setAttribute("type", "hidden"); in IE8 in plain Javascript doesn't work
<input type="button" value="test Javascript" onclick="test();"/>
<hr>
<form method="POST" action="" id="form1">
</form>
This shows that using jquery with createElement triggers the problem
<input type="button" value="test JQuery" onclick="testJquery();"/>
<hr>
This shows that using attr('type', 'hidden') with an element already on the page triggers the validation check jquery already has
<input type="button" value="test JQuery 2" onclick="testJquery2();"/>

JavaScript

function test() {
    var d = document.getElementById("in");
    d.setAttribute("type", "hidden");
}

function testJquery() {
    var form = $('#form1');
    var key = 'lala';
    var value = 'life goes on';
    $(document.createElement('input')).attr('type', 'hidden').attr('type', 'hidden').attr('id', 'h').appendTo(form);

    alert($('#h'));
}

// sets type to hidden on a input that already exists on the page
function testJquery2() {
    $('#in').attr('type', 'hidden');


    alert($('#in'));
}