JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">test</div>
        <div class="panel-body">
    <div class="row">
         <div class="col-xs-3 well well-sm">
    <select id="select1" multiple class="form-control">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<div>&nbsp;</div>
<select id="select2" multiple class="form-control">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<div>&nbsp;</div>
<select id="select3" multiple class="form-control">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<div>&nbsp;</div>
<select id="select4" multiple class="form-control">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<div>&nbsp;</div>
<select id="select5" multiple class="form-control">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
              <div class="col-sx-9">
             </div>
        </div>
    </div>
        </div>
    </div>
</div>

JavaScript

$("select").each(function() {
    $(this).change(function() {
        var selector =  $(this);
        var PrevAll = selector.prevAll("select");
        var NextAll = selector.nextAll("select");
        
        PrevAll.each(function() {
            alert($(this).prop("id"));
        });
        
        NextAll.each(function() {
            console.log($(this).prop("id"));
        });
        
    });    
});