JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input type="text" value="some < nasty > html" />
</form>

<form>
    <input type="text" value="some < nasty > html" />
</form>

JavaScript

function htmlEncode(value){
        //create a in-memory div, set it's inner text(which jQuery automatically encodes)
        //then grab the encoded contents back out.  The div never exists on the page.
        return $('<div/>').text(value).html();
    }

    function htmlDecode(value){
        return $('<div/>').html(value).text();
    }

$('form :input').val(function() {
   return this.value = htmlEncode(this.value);
});