Here is a straightforward solution to your problem, using simple Jquery code and some minor HTML adjustments. Keep in mind that there are multiple ways to achieve the same result.
In this implementation, I have utilized basic Jquery code along with slight modifications to the HTML you provided in Plunker. Feel free to customize it further based on your requirements.
To specify container selection, you can include a data-set attribute in each anchor element within both containers. The value of data-set in the left container indicates the number of items expected in the right container. Similarly, the value of data-set in the right container denotes the total items available.
Below is the HTML structure:
<div class="col-6">
<div class="card ">
<div class="card-header py-2">Container Left</div>
<div id="leftContainer" class="list-group">
<a href="#" data-set="2" class="list-group-item py-0 list-group-item-action">Container Left 7 items</a>
<a href="#" data-set="4" class="list-group-item py-0 list-group-item-action">Cras justo odio 10 items</a>
<a href="#" data-set="3" class="list-group-item py-0 list-group-item-action">Dapibus ac facilisis 17 items</a>
<a href="#" data-set="5" class="list-group-item py-0 list-group-item-action">Morbi leo risus 12 items</a>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-header py-2">Container Right</div>
<div id="rightContainer" class="list-group" style="height:225px; overflow-y: scroll">
<a href="#" data-set="1" class="list-group-item py-0 list-group-item-action">1</a>
<a href="#" data-set="2" class="list-group-item py-0 list-group-item-action">2</a>
<a href="#" data-set="3" class="list-group-item py-0 list-group-item-action">3</a>
<a href="#" data-set="4" class="list-group-item py-0 list-group-item-action">4</a>
<a href="#" data-set="5" class="list-group-item py-0 list-group-item-action">5</a>
<a href="#" data-set="6" class="list-group-item py-0 list-group-item-action">6</a>
<a href="#" data-set="7" class="list-group-item py-0 list-group-item-action">7</a>
<a href="#" data-set="8" class="list-group-item py-0 list-group-item-action">8</a>
<a href="#" data-set="9" class="list-group-item py-0 list-group-item-action">9</a>
<a href="#" data-set="10" class="list-group-item py-0 list-group-item-action">10</a>
<a href="#" data-set="11" class="list-group-item py-0 list-group-item-action">11</a>
<a href="#" data-set="12" class="list-group-item py-0 list-group-item-action">12</a>
<a href="#" data-set="13" class="list-group-item py-0 list-group-item-action">13</a>
<a href="#" data-set="14" class="list-group-item py-0 list-group-item-action">14</a>
</div>
</div><!--class="card"-->
</div><!--class="col-6"-->
Make sure to notice the styling of the rightContainer div, which addresses the vertical scroll issue (mentioned in the second part of your query). You may need to adjust the height for individual items once the styling is complete.
Below is the Jquery function responsible for handling the selection process:
$("#leftContainer > a").click(function(event){
event.preventDefault();
$("#leftContainer > a").removeClass("active");
$(this).addClass("active");
var leftDataSet = parseInt($(this).attr("data-set"));
$("#rightContainer > a").removeClass("active");
$("#rightContainer > a").hide();
$("#rightContainer > a").each(function(){
if(leftDataSet >= parseInt($(this).attr("data-set"))){
$(this).show();
}
});
});
I have used the active Bootstrap class to highlight selected elements. For highlighting selections as per the third part of your inquiry, you can utilize the following snippet:
$("#rightContainer > a").click(function(event){
event.preventDefault();
$(this).toggleClass("active");
});
To address the final segment of your question, you can initially hide all anchors by either adding a d-none class to them in the HTML or executing this line at the beginning of your JavaScript file before the above events:
$("#rightContainer > a").hide();
I hope this explanation proves useful!