JSFiddle - React, Tailwind, and code Playground

by rbyce

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div class="row offset4">
                <ol id="druglist" class="ui-selectable"><li class="ui-widget-content offset3 ui-selectee ui-selected">Prezista</li><li class="ui-widget-content offset3 ui-selectee">Stribild</li></ol>
            </div>            
            <table id='planstatus' class="table table-striped offset1 ">
                <tr> 
                    <th class='colhead'>Drug</th>
                    <th class='colhead'>CDR Review</th>
                    <th class='colhead'>Plan Status</th> 
                </tr> 
                <tr> 
                    <th class='rowhead'>Illaris</th> 
                    <td>List with Criteria</td>
                    <td>List</td> 
                </tr>
                <tr> 
                    <th class='rowhead'>Jakavi</th> 
                   <td>DNL</td>
                    <td>DNL</td> 
                </tr>
            </table>

CSS

#feedback { font-size: 1.4em; }
        #druglist .ui-selecting { background: #FECA40; }
        #druglist .ui-selected { background: #F39814; color: white; }
        #druglist { list-style-type: none; margin: 0; padding: 0; width: 30%; }
        #druglist li { margin: 3px; padding: 0.4em; }

JavaScript

$(function(){
    $('#druglist').selectable({
        filter:'li',
        selected: function(event, ui){
            console.log(event);
            console.log(ui);
            $( '#planstatus' ).removeClass("hide");
            var s=$(this).find('.ui-selected');
            var sval = $(this).find('.ui-selected').text();
            console.log(s);
            console.log(sval);
            
      
         var addPlanStatus = function( DrugName ) {

                //create new tr element
                var itr = document.createElement("tr")
                    itd1 = document.createElement("td")
                    itd2 = document.createElement("td")
                    itd3 = document.createElement("td")
                    itdName = document.createTextNode(DrugName)
                    itdCDRStatus = document.createTextNode("Do Not List");
                    itdPlanStatus = document.createTextNode("List");
             
                 itd1.appendChild(itdName);
                 itd2.appendChild(itdCDRStatus);
                 itd3.appendChild(itdPlanStatus);
                 itr.appendChild(itd1);
                 itr.appendChild(itd2);
                 itr.appendChild(itd3);
             
        

                //create new row onto the table.
                document.getElementById("planstatus").appendChild(itr);

            };   
            
        var PlanStatus = document.getElementById("planstatus");
        
        //
        // Remove the current list.
        //
        //while (PlanStatus.firstChild ){
        //    PlanStatus.removeChild(PlanStatus.firstChild);
        //}
        $("#planstatus tr:gt(0)").remove();
        addPlanStatus($(this).find('.ui-selected').text());
        //
        // Call the server for new drugs.
        //
        //$.post("{{path('ajax_call_getplanstatus')}}",{drugname: $(this).find('.ui-selected').text(), ajax: 'true'}, function(planstatus){
        //    for (var i = 0; i < planstatus.length; i++)...