simple up/down/remove/add for select

gistfile1.txt

<div class="row">
  <div class="col-sm-4">
    <input type="text" placeholder="Item To Add" class="form-control arrayable_item">
  </div>
  <div class="col-sm-8">
    <a class="create btn btn-info add_to_arrayable" href="#"><i class="icon-plus icon-white"></i> Add To List</a>
  </div>
</div>

<div class="row">
  <div class="col-sm-12">
    <select class="form-control arrayable" multiple></select>
  </div>
</div>

<a href="#" class="up">up</a>
<a href="#" class="down">d</a>
<a href="#" class="x">x</a>

<script>
  $(document).ready(function() {
    $('select .arrayable').removeAttr('multiple');
  });
  $('.add_to_arrayable').click(function() {
      var item = $('.arrayable_item');
      if(item.val() == '') { return; }
      $(".arrayable").append(new Option(item.val(), item.val()));
      item.val('');
  });
  $('.up').click(function() {
      var this_one = $("select option:selected");
      if(this_one.index() <= 0) { return; }
      var opts = $('select option').eq(this_one.index() - 1);
      var n = opts.before(new Option(this_one.val(), this_one.val()));
      opts.prev('option').attr('selected', 'true');
      this_one.remove();
  });
  $('.down').click(function() {
      var this_one = $("select option:selected");
      if(this_one.index() < 0) { return; }

      if((this_one.index()) == $('select option').eq(-1).index()) {
          return;
      }
      var opts = $('select option').eq(this_one.index() + 1);
      opts.after(new Option(this_one.val(), this_one.val()));
      opts.next('option').attr('selected', 'true');
      this_one.remove();
  });
  $('.x').click(function() {
    $('select option:selected').remove();
  });
</script>