<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="form-group"> <label class="control-label">Pipeline Stage</label> <div id="PipelineStage" class="btn-group btn-group-lg btn-group-justified" style="width: 100%; height: 18px;"> <div class="btn-group btn-group-lg" role="group"> <button class="updateStatus btn btn-default input-block-level" value="hold" data-sequence="1"> </button> </div> <div class="btn-group btn-group-lg" role="group"> <button class="updateStatus btn btn-default input-block-level" value="hold" data-sequence="2"> </button> </div> <div class="btn-group btn-group-lg" role="group"> <button class="updateStatus btn btn-default input-block-level" value="hold" data-sequence="3"> </button> </div> <div class="btn-group btn-group-lg" role="group"> <button class="updateStatus btn btn-default input-block-level" value="hold" data-sequence="4"> </button> </div> <div class="btn-group btn-group-lg" role="group"> <button class="updateStatus btn btn-default input-block-level" value="hold" data-sequence="5"> </button> </div> </div> </div>

jQuery(document).ready(function() { $(".updateStatus").click(function(event) { var currentObject = $(event.target); var max = currentObject.data("sequence"); $(currentObject.closest("#PipelineStage").find(".btn-group .btn-success").each(function() { if ($(this).data("sequence") > max) { max = $(this).data("sequence") } })); if (currentObject.hasClass('btn-success') && max > currentObject.data("sequence")) { var updateBtns = $("#PipelineStage").find(".btn-group .btn-success"); var results = []; for (var i = 0; i < updateBtns.length; i++) { if ($(updateBtns[i]).data("sequence") > currentObject.data("sequence")) { results.push(updateBtns[i]); } } for (var i = 0; i < results.length; i++) { $(results[i]).removeClass('btn-success'); } } currentObject.toggleClass(($(event.target).val() === "hold") ? 'btn-success' : 'btn-default'); }); });