JSFiddle - React, Tailwind, and code Playground

HTML

<input type="number" min="1" max="12" value="12" />

JavaScript

(function ($) {

  var methods = {
    cycle: function () {
      if (this.attributes.max && this.attributes.min) {
        var val = this.value;
    		var min = parseInt(this.attributes.min.value, 10);
    		var max = parseInt(this.attributes.max.value, 10);
        if (val === this.attributes.max.value) {
          this.value = min + 1;
        } else if (val === this.attributes.min.value) {
          this.value = max - 1;
        }
        else if (!(val > min && val < max)) {
            // Handle values being typed in that are out of range
            this.value = $(this).attr('data-default');
        }
      }
    }
  };

  $.fn.circularRange = function () {
    return this.each(function () {
      if (this.attributes.max && this.attributes.min) {
        var $this = $(this);
        var defaultVal = this.value;
    		var min = parseInt(this.attributes.min.value, 10);
    		var max = parseInt(this.attributes.max.value, 10);
        $this.attr('min', min - 1);
        $this.attr('max', max + 1);
        $this.attr('data-default', defaultVal);
        $this.on("change", methods.cycle);
      }
    });
  };

})(jQuery);

$("input[type='number']").circularRange();