JSFiddle - React, Tailwind, and code Playground

HTML

<input value="ABC-0000" data-value="0" data-prefix="ABC-" id="incremental">
<a href="#" id="add">Add incremental</a>

JavaScript

var incremental = $("#incremental");

$("#add").click(function(e, reload) {
   var cur = utils.getCookie("lastId") || parseInt(incremental.data('value')),
       prefix = incremental.data('prefix'),
       padded;
       
    if(reload !== true) {
        cur++;
    }
 
    padded = ('000'+cur).slice(-4); // Prefix three zeros, and get the last 4 chars
    incremental.val(prefix + padded).data('value', cur);
    utils.setCookie("lastId", cur, 10);//name, value, days to rememer
});

var utils = {
    setCookie: function(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime()+(exdays*24*60*60*1000));
        var expires = "expires="+d.toGMTString();
        document.cookie = cname + "=" + cvalue + "; " + expires + "; path=/; domain=." + location.host;
    },

    getCookie: function(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++)  {
            var c = ca[i].trim();

            if (c.indexOf(name)==0)
                return c.substring(name.length,c.length);
        }
        return null;
    }
};

$("#add").trigger("click", [true]);