JSFiddle - React, Tailwind, and code Playground

HTML

<pre>bachefgd
z      i
y      j
x      k
w      l
v      m
ptsrnuoq</pre>

<textarea id="inbox" cols="40" rows="5" >The quick brown fox jumps over the lazy dog</textarea>
<hr/>
<textarea id="outbox" cols="40" rows="5"></textarea>

<button id="goBabyGO">Translate!!</button>

JavaScript

var old_alpha = "abcdefghijklmnopqrstuvwxyz";
var new_alpha = "bachefgdijklmqounrstpvwxyz";


$("#goBabyGO").click(function(){
    var invalue= $("#inbox").val();
    for (var i in old_alpha) {
        invalue.replace(old_alpha[i], new_alpha[i]);
    }
    $("#outbox").val(invalue);
});