JSFiddle - React, Tailwind, and code Playground

by xroot

HTML

<link rel="stylesheet" href="http://silviomoreto.github.io/bootstrap-select/bootstrap-select.min.css">
<script src="http://silviomoreto.github.io/bootstrap-select/bootstrap-select.min.js"></script>
<select class="selectpicker" multiple title="Not changable text">
    <option id='not-attending' data-attending="0" value="no">NO</option>
    <option data-attending="2" value="tbd">TBD</option>
    <option data-attending="1" value="7">Mon,5/14</option>
</select>

JavaScript

$('.selectpicker').on('change', function (e) {
    // take jquery val()s array for multiple
	//store the selected value
    var $selectedOption = $(this).find(':selected');
    var attending = $selectedOption.data('attending');
	var checkAttendings = [];
	$selectedOption.each(function(index){
		checkAttendings.push($(this).data('attending'));
	});
    // take jquery vals() array for multiple
    var value = checkAttendings || [];

    // take the existing old data or create new
    var old = $(this).data('old') || [];

    // take the old order or create a new
    var order = $(this).data('order') || [];

    // find the new items
    var newone = value.filter(function (val) {
        return old.indexOf(val) == -1;
    });
    // find missing items
    var missing = old.filter(function (val) {
        return value.indexOf(val) == -1;
    });
    // console.log(missing,newone)
    // remove missing items from order array and add new ones to it
    $.each(missing, function (i, miss) {
        order.splice(order.indexOf(miss), 1);
    })
    $.each(newone, function (i, thing) {
        order.push(thing);
    })

    // save the order and old in data()
    $(this).data('old', value).data('order', order);

	if(JSON.stringify(order) == JSON.stringify([1,2]) || JSON.stringify(order) == JSON.stringify([0,2]))
	{
    	attending = 2;
	}
    

	//if current selected array equal to [0,2] that means user trying to check TBD
	if(JSON.stringify(order) == JSON.stringify([1,0]) || JSON.stringify(order) == JSON.stringify([2,0]))
	{
    	attending = 0;
	}

	//if current selected array equal to [0,1]  or [2,1] that means user trying to check Attending date
	if(JSON.stringify(order) == JSON.stringify([0,1]) || JSON.stringify(order) == JSON.stringify([2,1])){
    	attending = 1;
	}

    console.log(order, 'attending :'+attending);

    if(attending == 1)
    {

   		$(this).next().find('button').removeClass('btn-default btn-danger btn-success').addClass('btn-success');
   		var tbd =...