JSFiddle - React, Tailwind, and code Playground

by Yasin Yoruk

HTML

<script src="https://raw.githubusercontent.com/bigboytr/spinner_yy/master/spinner.js"></script>
<input class="spinner1" type="text" value="0" />
<input class="spinner1" type="text" value="0" />
<input class="spinner1" type="text" value="0" />
<input class="spinner1" type="text" value="0" />

CSS

.spinner_yy {
  list-style: none;
  display: inline-block;
  line-height: 0px;
  vertical-align: top;
  padding: 0;
  margin: 0;
}

.spinner_yy li {
  font-size: 8px;
  background: #95a5a6;
  padding: 5.5px 5px;
  cursor: default;
  display: block;
  border: 0.5px #ccc solid;
}

JavaScript

/**
*** Author : Yasin
*** Date : 14.03.2014 Friday
*** Versiyon : v1.0
*** Description : 
	This pluging has unique id / class name for every instance. 
	It has 2 option. 
	Increment option tells how many number can increment every up button or decrement down click.
	Negative option tells stop at zero or continue to down. Default is false, so it will stop at 0. if it is true, value can be negative.
**/
(function($){
		
	$.fn.spinner_yy = function($options) {
		
		var $this = $(this);
		var $result = 0;
		var $ind = 0;
		var $buttons = '';
		
		// Options
		var settings = $.extend({
			// These are the defaults.
			increment: 1,
			negative: false
		
		}, $options );
		
		
		// this is add spin button after input
		$("input:text").each(function(index, element) {
			
            $buttons = '<ul class="spinner_yy"><li id="spin_up_yy" data-index="'+index+'">&#9650;</li><li id="spin_down_yy" data-index="'+index+'">&#9660;</li></ul>';
			
			$(this).after($buttons);
        });
		
		
		// increment func
		$($this).next(".spinner_yy").on("click","#spin_up_yy", function() {
			
			$ind = $(this).attr("data-index");

			$result = parseInt($("input:eq("+$ind+")").val()) + settings.increment;
			$("input:eq("+$ind+")").val($result);
		});
		
		// decrement func
		$($this).next(".spinner_yy").on("click","#spin_down_yy", function() {
			
			$ind = $(this).attr("data-index");
	
			$result = parseInt($("input:eq("+$ind+")").val()) - settings.increment;
			
			if (!settings.negative && $result < 0) {
				$result = 0;
			}
			
			$("input:eq("+$ind+")").val($result);
		});
		
		// Only number
		$this.on("keydown",function(e) {
			
			var code = e.keyCode;

			if ((code == 8 || code == 46 || code == 37 || code == 39) || (code >= 48 && code <= 57) || (code >= 96 && code <= 105)) {
				return true;
			} else {
				e.preventDefault();
			}
		});	

	};
	
}(jQuery));

// SAMPLE USAGE FROM THIS LINE
$(function() {
  // options {increment:value,negative:true/false}
 ...