JSFiddle - React, Tailwind, and code Playground

HTML

<input id="uazz" type="text">single<br/><br/>

<input id="in" type="text">in<br/><br/>
<input id="out" type="text" readonly>out<br/><br/>

JavaScript

let userInput = document.getElementById('uazz')

let prefix='@'
let suffix='%'

function transformInput(el){
  let originalInput = el.target.value;
  if(originalInput!==''){
	  let transformedInput = originalInput
    if(!transformedInput.match(new RegExp('^' + prefix))){
	    transformedInput = prefix + transformedInput
    }
    if(!transformedInput.match(new RegExp(suffix + '$'))){
	    transformedInput = transformedInput + suffix
    }
		if(transformedInput!==originalInput){
	  	el.target.value = transformedInput
    }
  }
}

userInput.onkeyup = transformInput

/* :] */

function transformInputOUT(el){
	let userInputOUT = document.getElementById('out')
  let originalInput = el.target.value;
  let transformedInput = originalInput

  if(transformedInput !== ''){
	  transformedInput = prefix + transformedInput + suffix
  }
  userInputOUT.value = transformedInput

}


let userInputIN = document.getElementById('in')
userInputIN.onkeyup = transformInputOUT