JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<label for="serial">Type something magical</label>
<input type="text" id="serial" name="serial">

JavaScript

$('#serial').on('input', function() {

  var str = $(this).val().trim();
  var i = 3;
  while (i < str.length) {
    if (str.charAt(i) == '-') {
      i += 4;
    } else {
      str = str.slice(0, i) + '-' + str.charAt(str.length-1);
    }

  }
  $(this).val(str);

});