JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default hide">Right</button>
</div>
<br/>
<br/>
<div class="btn-group">
  <button type="button" class="btn btn-default hide">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
<br/>
<br/>
<div class="btn-group">
  <button type="button" class="btn btn-default hide">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default hide">Right</button>
</div>

CSS

body{margin:10px}
.btn-group > .btn.btn-default.radius-left {
    border-top-left-radius: 4px!important;
    border-bottom-left-radius: 4px!important;
}
.btn-group > .btn.btn-default.radius-right {
    border-top-right-radius: 4px!important;
    border-bottom-right-radius: 4px!important;
}
.hide{
  display:none;
}

JavaScript

//$(".btn-group button:visible").first().addClass('radius-left').end().last().addClass('radius-right');
//function btn_group(){
//  $(".btn-group button:visible").first().addClass('radius-left');
//	$(".btn-group button:visible").last().addClass('radius-right');
//

//$('.btn-group').each(function() {
//  $('.btn:visible').first().addClass('radius-left');
//  $('.btn:visible').last().addClass('radius-right');
//});

$('.btn-group > button:visible').each(function() {
   
    if ($(this).first().is(':visible')) {
        $(this).addClass('radius-left'); 
    } 
    //if ($(this).last().is(':visible')) {
    //    $(this).addClass('radius-right'); 
    //}
 .first()
    .addClass('radius-left')
    .end()
    .last()
    .addClass('radius-right');
});


//
//if($('.btn').is(":hidden")){
  
//	$(".btn").is(":visible").first().addClass('radius-left');
//  $(".btn").is(":visible").last().addClass('radius-left');
//}

// $(".btn-group button:visible").first().addClass('radius-left').end().last().addClass('radius-right');
  
  

//$(".btn-group button:visible").last().addClass('radius-right');
//$(".btn-group button:visible").first().addClass('radius-left');



//$(".btn-group div:visible").first().addClass('radius-left').end().last().addClass('radius-right');
//$(".btn-group span:visible").first().addClass('radius-left').end().last().addClass('radius-right');