JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

<select id="edit-attributes-1">
      <option value="44" selected="selected">fdgd0</option>
      <option value="35">fgfd1</option>
      <option value="36">fgfdg2</option>
      <option value="37">3fdgfdgdf</option>
</select>
<select id="edit-attributes-2">
      <option value="44" selected="selected">0</option>
      <option value="35">1</option>
      <option value="36">2</option>
      <option value="37">3</option>
</select>

CSS

select {
 float:left;
 clear:left;
}
span {
  float:left;
  display:block;
  width: 10px;
  height: 15px;
  background-color: #EEE;
  border:1px solid #AAA;
  padding:2px;
  margin:2px;
  text-align: center;
  cursor: pointer;
}

JavaScript

//This Code adds <span>+</span> and <span>-</span> with their attributes
$('select[id^="edit-attributes-"][id!="edit-attributes-12"]').after(function() {
    var count = $(this).find('option').length;
    return '<span class="step stepup step-' + this.id + '" id="step-up-' + this.id.substring(16) + '">+</span><span class="step stepdown step-' + this.id + '" id="step-down-' + this.id.substring(16) + '">-</span>';

});

//This code detects reacts when + or - is clicked.
$('span[id^="step-"]').click(function() {
    //Tokenized class name into array <span class="step stepup step-edit-attributes-1" id="step-up-1">+</span> 
    var classList = $(this).attr('class').split(/\s+/),
        item      = $('#'+classList[2].substring(5)),
        selected  = item[0].selectedIndex;

    //since id is "step-up-ID" just want to get the UP or DOWN
    var op = this.id.split("-");

    var index = (op[1] == 'up' ? 1 : -1) + selected;
    if (item.find('option')[index]) {
        item[0].selectedIndex = index;
    }    
});