Jquery Ui: Selectable - possible to select two list items with one click?

Question

I am using Jquery Ui: selectable on a list and am trying to figure out how to select two list elements with one click. I want it so that when a list item is clicked/selected, the next item in the list also gets selected.

ASPX page:

<button id="joinButton" type="button" class="collapsible inactiveSequenceTitle">
    <span style="margin-left: 0.35em;" class="icon expand-icon glyphicon glyphicon-plus">
    &nbsp
    </span>Join Sections
</button>
<div id="joinBox" class="panel-collapse collapse">
    <ul id="sortableJoin-1" style="width: 98%; margin: auto;"></ul>

    <div id="saveJoin">
        <button type="button" class="btn btn-primary" id="join">
            <span class="fa fa-save">
            &nbsp
            </span>Join 
        </button>
    </div>
</div>

Jquery/Jvascript:

$("#sortableJoin-1").selectable({
    selected: function(event, ui) {
        var selected = $("li[class$='ui-selected']").length;
    }
    stop: function (e) {
        var last = $("li[class$='ui-selected']:last").index();
        $("li:eq(" + (last + 1) + ")").addClass("ui-selected");
    },
});

$('#sortableJoin-1').click(function() {
    $(this).addClass('no-hover');
})

Answer 1

You can select the next item of the selected item using the stop event which is triggered at the end of the select operation. Inside stop, get the index of the last element with the class ui-selected and add this class to the next element in the list.

$("#sortableJoin-1").selectable({
  selected: function(event, ui) {
    var selected = $("li[class$='ui-selected']").length;
  },
  stop: function(e) {
   var last = $("li[class$='ui-selected']:last").index();
   $("li:eq(" + (last + 1) + ")").addClass("ui-selected");
  }
});

 .ui-selected {
    background: red;
    color: white;
    font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
              src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
              integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
              crossorigin="anonymous"></script>
        
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<button id="joinSectionsButton" type="button" class="collapsible inactiveSequenceTitle"><span style="margin-left: 0.35em;" class="icon expand-icon glyphicon glyphicon-plus">&nbsp;</span>Join Sections</button>
<div id="joinSectionsBox" class="panel-collapse collapse">
  <ul id="sortableJoin-1" style="width: 98%; margin: auto;">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
  </ul>

  <div id="saveJoinSections">
    <button type="button" class="btn btn-primary" id="joinSections"><span class="fa fa-save">&nbsp;</span>Join Sections</button>
  </div>
</div>