JSFiddle - React, Tailwind, and code Playground

by SebastianPataneMasuelli

HTML

<div class="span9">
     <div id = "selectedtags" class="well">
     </div>
     <button class="btn" type="button" id="delegatecontent">Create report</button>
</div>

<ul>
    <li class="dbcol">Location_Id</li>
    <li class="dbcol">Location_Name</li>
    <li class="dbcol">Location_EN</li>
</ul>

CSS

body {padding-top: 40px; padding-bottom: 40px; font-family: 'Monda', sans-serif;}
ul li {cursor: pointer;}

JavaScript

$(document).ready(function() {  
    
            $('.dbcol').on('click', function () {
              
                var str = "";
                str = $(this).closest("ul").attr("id");
                var master_name = "";
                if (str == "countryselect") {master_name = "Country_Master"}
                if (str == "stateselect") {master_name = "State_Master"}
                if (str == "locationselect") {master_name = "Location_Master"}
                if (str == "hotelselect") {master_name = "Hotel_Master"}      
                var $newelement = "";

                $newelement += '<span class="label label-info isr" style="margin-top:3px; margin-bottom:2px; margin-right:5px; margin-left:3px; padding:2px;" id = ' +str+ '>';
                $newelement += master_name + '.';
                $newelement += $(this).text() + "  ";
                $newelement += '<i class="icon-remove icon-white"></i>';
                $newelement += '</span>';

                $(this).remove();
                $("#selectedtags").append($newelement);
            });

            $("i").hover(
            function () {
                $(this).removeClass('icon-white');
            });


            $('i').on('click',function() {
                var id = '#'
                id += $(this).closest("span").attr("id");
                var trt = $(this).closest("span").text();
                trt = trt.substring(trt.indexOf('.')+1);
                $(id).append('<li class="dbcol">' + trt +'</li>');
                $(this).closest("span").remove();
            });

            $("#delegatecontent").on('click',function() {
                var strqw ="";
                var final_string = "Select ";
                $('.isr').each( function() {
                    var df = $(this).text();
                    if (strqw == ""){
                        strqw += df;
                    }
                    else
                    {
                        strqw += ', '; 
           ...