JSFiddle - React, Tailwind, and code Playground

by Nabaraj Saha

HTML

<body style="background-color: azure;" ng-app="app">
    <div id="container" style="padding: 50px 100px 50px 200px; width: 80%" ng-controller="ctrl">
        <div class="block" style="padding: 15px;">
            <h4 class="blockTitle">Rule Builder</h4>
            <br />
            <div class="row">
                <div class="col-md-2">
                    <button class="btn btn-default" id="objct">Show Objects</button>
                    <script>
                        $(document).ready(function(){
                            $('#objct').click(function(){
                                $('#objList').show();
                            })                            
                        })
                    </script>
                </div>
                <div class="col-md-5" id="objList" style="display: none;height: auto; width: 200px;" >
                    <select class="SlectBox" size="8" multiple="multiple" title="Select objects">
                        <option value="Object_1">Object 1</option>
                        <option value="Object_2">Object 2</option>
                        <option value="Object_3">Object 3</option>
                        <option value="Object_4">Object 4</option>
                        <option value="Object_5">Object 5</option>
                        <option value="Object_6">Object 6</option>
                        <option value="Object_7">Object 7</option>
                        <option value="Object_8">Object 8</option>
                        <option value="Object_9">Object 9</option>
                        <option value="Object_10">Object 10</option>
                        <option value="Object_11">Object 11</option>
                    </select>
                    <br />
                    <br />
                    <button id="close" class="btn btn-default" style="float: right">OK</button>
                </div>
            </div>
            <br /><br />
            <p id="list"></p>
            <br...

JavaScript

$(function () {
                    
                    $('#close').click(function(){
                        var objs = [];
                        var optionList = "";
                        $.each($(".SlectBox option:selected"), function(){            
                            objs.push($(this).val());
                        });
                        $( '#list' ).html(objs.join(", "));
                        $("#selctObjs").html("");
                        
                        $.each(objs,function(index){
                            optionList=optionList+"<option>"+objs[index]+"</option>"
                        })
                        $("#selctObjs").html(optionList);
                    });
                });