JSFiddle - React, Tailwind, and code Playground

HTML

<div class="btn-group alignright btn-status">
          <a href="#" class="btn btn-toggle btn-info"><i class="icon-pencil icon-white"></i> Draft</a>
          <a data-toggle="dropdown" href="#" class="btn dropdown-toggle btn-info"><span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a data-status="draft" href="#"><i class="icon-pencil"></i> Draft</a></li>
            <li><a data-status="publish" href="#"><i class="icon-ok-sign"></i> Publish</a></li>
            <li><a data-status="archive" href="#"><i class="icon-lock"></i> Archive</a></li>
          </ul>
          <input type="hidden" value="draft" name="att_status">
</div>

CSS

/*!
 * Bootstrap v2.0.0
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
audio:not([controls]) {
  display: none;
}
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
a:hover, a:active {
  outline: 0;
}
sub, sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  max-width: 100%;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}
button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}
button, input {
  *overflow: visible;
  line-height: normal;
}
button::-moz-focus-inner, input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
textarea {
  overflow: auto;
  vertical-align: top;
}
body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: #333333;
  background-color: #ffffff;
}
a {
  color: #0088cc;
  text-decoration: none;
}
a:hover {
  color: #005580;
  text-decoration: underline;
}
.row {
  margin-left: -20px;
  *zoom: 1;
}
.row:before, .row:after {
  display:...

JavaScript

$(".btn-status .dropdown-menu a").click(function(){

    var status = $(this).attr('data-status');
    var status_html = $(this).html();
    var toggle = $(".btn-status .btn-toggle");
    var dropdown_toggle = $(".btn-status .dropdown-toggle");
    var status_input = $("input[name='att_status']");

    switch(status){
        case "publish":
            toggle.removeAttr('class').addClass('btn btn-toggle btn-success');
            dropdown_toggle.removeAttr('class').addClass('btn dropdown-toggle btn-success');
        break;
        case "draft":
            toggle.removeAttr('class').addClass('btn btn-toggle btn-info');
            dropdown_toggle.removeAttr('class').addClass('btn dropdown-toggle btn-info');
        break;
        case "archive":
            toggle.removeAttr('class').addClass('btn btn-toggle btn-inverse');
            dropdown_toggle.removeAttr('class').addClass('btn dropdown-toggle btn-inverse');
        break;
    }
    toggle.html( status_html ); //reset toggle with new status
    
    if(status!='archive') toggle.find("i").addClass('icon-white'); //set icon to white
    
    status_input.attr('value',status); //set the hidden input field

});