JSFiddle - React, Tailwind, and code Playground

HTML

<div class="exclusions">
    <p>Excluded Serial numbers that will never be generated:</p>
    <div>
        <input type="text" class="test" name="test[]" value="AC" />
    </div>
    <div>
        <input type="text" class="test" name="test[]" value="BC" />
    </div>
    <div>
        <input type="text" class="test" name="test[]" value="AA" />
    </div>
</div>
<div class="output-wrapper">
    <p>
        <button type="button" class="generate-serials">Generate Serials</button>
    </p>
    <div class="output">
    </div>
</div>

CSS

.test {
    display: block;
    margin: 10px auto;
    width: 50%;
    padding: 5px;
}

.exclusions {
    border: 1px solid red;
    background-color: lightgray;
    padding: 0 15px;
    text-align: center;
}
.output-wrapper {
    margin: 15px 0;
    padding: 0 15px;
    border: 1px solid green;
    box-sizing: border-box;
}
.output-wrapper > p {
    text-align: center;
    padding: 10px;
    border-top: 1px dashed black;
    border-bottom: 1px dashed black;
}
.output {
    display: block;
    margin: 0 auto;
    text-align: center;
}
.inline-block {
    display: inline-block;
    padding: 0 15px;
    box-sizing: border-box;
}

JavaScript

String.prototype.insert = function (index, string) {
  if (index > 0)
    return this.substring(0, index) + string + this.substring(index, this.length);
  else
    return string + this;
};

jQuery(document).ready(function($) {
	$.extend({
		generateSerial: function(formula, chrs, checks) {
			var formula = formula && formula != "" ? formula : 'XXX-XXX-XXX-XXX-XXX', // Default Formula to use, should change to what's most commonly used!
				chrs = chrs && chrs != "" ? chrs : "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",	// Default characters to randomize, if not defined!
				serial = "",
				len = (formula.match(/X/g) || []).length,
				indices = [],
				rand;

			// Get all "-" char indexes
			for(var i=0; i < formula.length; i++) {
				if (formula[i] === "-") indices.push(i);
			}
				
			do {
				rand = Array(len).join().split(',').map(function() {
					return chrs.charAt(Math.floor(Math.random() * chrs.length));
				}).join('');

				// Rebuild string!
				if (indices.length > 0)
				{
					for(var x=0; x < indices.length; x++)
						rand = rand.insert(indices[x], '-');
				}

			} while (checks && $.inArray(rand, checks) !== -1);

			return rand;
		}
	});

    $(".generate-serials").click(function(event) {
        event.preventDefault();

        if ($(".test").length)
            var elem = $(".test").map(function() {return $(this).val(); }).get();
        else
            var elem = [];

        for (var x = 0; x < 16; x++)
        {
            var output = $.generateSerial('XX', 'AB', elem);
            console.log(output);
            elem.push(output);

            var p = $("<p />").text(output);

            if ((x % 4) == 0 || x == 0) {
                var div = $("<div />").addClass("inline-block");
                div.appendTo($(".output"));
            }
            p.appendTo(div); 
        }
    });
    
});