JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" class="shortCodeText" max="6" maxlengthh="6" />
<a id="btnclick" class="button">Result</a>
CSS
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 5px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
JavaScript
$('.shortCodeText').keyup(function() {
var shortCode = $(this).val().split("-").join(""); // remove hyphens
if (shortCode.length > 0) {
shortCode = shortCode.match(new RegExp('.{1,2}', 'g')).join("-");
}
$(this).val(shortCode);
});
$('#btnclick').on('click', function(){
alert($('.shortCodeText').val());
})