JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<b>oO -> o_o</b><br />
<textarea id="input1"></textarea>
<input type="button" id="button1" value="convert" />
</div>
<div>
<b>o_o -> oO</b><br />
<textarea id="input2"></textarea>
<input type="button" id="button2" value="convert" />
</div>

CSS

#input1, #input2 {
  width:100%;
  border-radius: 5;
  min-height: 150px;
}

JavaScript

$('#button1').click(function() {
  var text = $('#input1').val();
  var textArr = text.split("\n");
  textArr = textArr.map(val => val.replace(/([A-Z])/g, "_$1"));  
  
  var finalResult = textArr.join('\n').toLowerCase();  
  
  $('#input1').val(finalResult);
});

$('#button2').click(function() {
  var text = $('#input2').val().toLowerCase();  
  var textArr = text.split('\n');
  textArr = textArr.map((val) => {
  	return val.replace(/_([a-z])/g,function(m){return m.toUpperCase();})
      			  .replace(/_/g,'');
  });
  
  var finalResult = textArr.join('\n');  
  
  $('#input2').val(finalResult);
});