To achieve this, you may need to utilize scripts (although there are other simple methods available). Below is an implementation using jQuery.
Using jQuery, you can select all previous siblings with prevAll()
and include the clicked button itself with andSelf()
. Here is a basic example as no code was provided.
$('.btn').click(function() {
$(this).prevAll('.btn').andSelf().addClass('bg-red');
$(this).nextAll('.btn').removeClass('bg-red');
console.log($(this).data('value'));
});
.bg-red{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn" value="button 1" data-value="1">
<input type="button" class="btn" value="button 2" data-value="2">
<input type="button" class="btn" value="button 3" data-value="3">
<input type="button" class="btn" value="button 4" data-value="4">
<input type="button" class="btn" value="button 5" data-value="5">