jQuery addClass example

Change class name on click in jQuery

HTML

<div href="#" class="m-d monthly-day monthly-day-event" data-number="1">
<div class="monthly-day-number">1</div>
<div class="monthly-indicator-wrap"></div>
</div>
<div href="#" class="m-d monthly-day monthly-day-event" data-number="2">
<div class="monthly-day-number">2</div>
<div class="monthly-indicator-wrap"></div>
</div>
<div href="#" class="m-d monthly-day monthly-day-event" data-number="1">
<div class="monthly-day-number">1</div>
<div class="monthly-indicator-wrap"></div>
</div>
<div href="#" class="m-d monthly-day monthly-day-event" data-number="2">
<div class="monthly-day-number">2</div>
<div class="monthly-indicator-wrap"></div>
</div>
<div href="#" class="m-d monthly-day monthly-day-event" data-number="1">
<div class="monthly-day-number">1</div>
<div class="monthly-indicator-wrap"></div>
</div>
<div href="#" class="m-d monthly-day monthly-day-event" data-number="2">
<div class="monthly-day-number">2</div>
<div class="monthly-indicator-wrap"></div>
</div><div href="#" class="m-d monthly-day monthly-day-event" data-number="1">
<div class="monthly-day-number">1</div>
<div class="monthly-indicator-wrap"></div>
</div>
<div href="#" class="m-d monthly-day monthly-day-event" data-number="2">
<div class="monthly-day-number">2</div>
<div class="monthly-indicator-wrap"></div>
</div>
<div href="#" class="m-d monthly-day monthly-day-event" data-number="1">
<div class="monthly-day-number">1</div>
<div class="monthly-indicator-wrap"></div>
</div>
<div href="#" class="m-d monthly-day monthly-day-event" data-number="2">
<div class="monthly-day-number">2</div>
<div class="monthly-indicator-wrap"></div>
</div>
<div href="#" class="m-d monthly-day monthly-day-event" data-number="1">
<div class="monthly-day-number">1</div>
<div class="monthly-indicator-wrap"></div>
</div>
<div href="#" class="m-d monthly-day monthly-day-event" data-number="2">
<div class="monthly-day-number">2</div>
<div class="monthly-indicator-wrap"></div>
</div>

CSS

.selected {
  border: 1px solid red;
}

JavaScript

$('body').on('click', '.m-d', function() {
		$('.m-d').removeClass('selected');
    $('.m-d:gt('+$(this).index()+')').slice(0, 3).addClass('selected');
    return false;
});