jQuery Block Selected by Range index

by Adi Jaya

HTML

<p class="button-container">
    <button class="button">A</button>
    <button class="button">B</button>
    <button class="button">C</button>
    <button class="button">D</button>
    <button class="button">E</button>
    <button class="button">F</button>
    <button class="button">G</button>
</p>
  
<p class="button-container">
    <button class="button">A</button>
    <button class="button">B</button>
    <button class="button">C</button>
    <button class="button">D</button>
    <button class="button">E</button>
    <button class="button">F</button>
    <button class="button">G</button>
</p>

<p class="button-container">
    <button class="button">A</button>
    <button class="button">B</button>
    <button class="button">C</button>
    <button class="button">D</button>
    <button class="button">E</button>
    <button class="button">F</button>
    <button class="button">G</button>
    <button class="button">H</button>
    <button class="button">I</button>
</p>

CSS

.active {
    color: white;
    background: blue;
}

.selected {
    color: white;
    background: purple;
}

JavaScript

$(".button-container").each(function () {
	var find = $( this ).find( ".button" );
    find.each(function (idx) {
    	$( this ).attr("data-index", [parseInt(idx) + parseInt(1)]);
    });
    
});

$(document).on("click", ".button", function () {
    var data = $(this).attr("data-index");
    var container = $(this).parents(".button-container");
    var find_active = container.find(".button.active");
    var len_btn_active = find_active.length;
    if (data) {
        if (len_btn_active < 2) {
            $(this).addClass("active");
            get(container);
        } else {
            container.find(".button").removeClass("active");
            $(this).click();
        }
    } else {
        alert("Missing data-index attribute");
    }
});

function get(selector) {
    $(selector).each(function () {
        var find = $(this).find(".button.active");
        var len = find.length;
        if (len == 2) {
            var start = $(selector).find(".button.active").first().attr("data-index");
            var end = $(selector).find(".button.active").last().attr("data-index");
            var array = [];
            for (var i = parseInt(start); i < [parseInt(end) + 1]; i++) {
                array.push(i);
            }
            
            $.each(array, function (i, val) {
                $(selector).find(".button[data-index='" + val + "']").addClass("selected");
            });
            
        } else {
            $(selector).find(".button").removeClass("selected");
        }
        
        
    });
}