JSFiddle - React, Tailwind, and code Playground

by shubh0602

HTML

<div class="stack">
    <div class="form_top"></div>
    <div class="float_break"></div>
    <div class="form">
        <br />
        <div class="formbox">
             <h5>All Users</h5>
            <br />
            <div id="all_users">
                <div id="user1" userid="1" class="innertxt">
                    <img src="http://shubhdasgupta.me/blogs/wp-content/uploads/2013/11/placeholder.jpg" width="75" height="75"><strong>Test User 01</strong>

                    <ul>
                        <li>User ID: 1</li>
                        <li>Email: [email protected]</li>
                        <li style="padding-top:5px;">
                            <input type="checkbox" id="select1" value="1" class="selectit" />
                            <label for="select1">&nbsp;&nbsp;Select it.</label>
                        </li>
                    </ul>
                </div>
                <div id="user2" userid="2" class="innertxt">
                    <img src="http://shubhdasgupta.me/blogs/wp-content/uploads/2013/11/placeholder.jpg" width="75" height="75"><strong>Test User 02</strong>

                    <ul>
                        <li>User ID: 2</li>
                        <li>Email: [email protected]</li>
                        <li style="padding-top:5px;">
                            <input type="checkbox" id="select2" value="2" class="selectit" />
                            <label for="select2">&nbsp;&nbsp;Select it.</label>
                        </li>
                    </ul>
                </div>
                <div id="user3" userid="3" class="innertxt">
                    <img src="http://shubhdasgupta.me/blogs/wp-content/uploads/2013/11/placeholder.jpg" width="75" height="75"><strong>Test User 03</strong>

                    <ul>
                        <li>User ID: 3</li>
                        <li>Email: [email protected]</li>
                        <li style="padding-top:5px;">
                            <input...

CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    color: #666;
}
* html .checklist label {
    height: 1%;
}
html {
    min-height: 101%;
}
a, a:link, a:visited, a:active {
    color: #999999;
    text-decoration: underline;
    font-size: .8em;
    outline:none;
}
a:hover {
    color: #333333;
    text-decoration: underline;
}
.stack {
    margin: 0;
    padding: 0;
}
.form {
    margin: 0px;
    padding: 10px;
    width: 667px;
}
.formbox {
    margin: 0px 0px 15px;
    padding: 0px;
}
.formbox h4 {
    margin: 0px 0px 5px;
    padding: 0px;
    color: #999999;
    font-size: 0.8em;
    font-weight: bold;
    float:left;
}
.formbox .checkbox {
    float:right;
    margin:20px;
}
.form_box {
    margin: 0px 0px 15px;
    padding-bottom: 40px;
    border-bottom: dashed 1px #d0cfcf;
}
.form_box h6 {
    margin-left:7px;
}
.form_box p {
    float:left;
    width:620px;
}
.form_box a {
    color:#000;
    text-decoration:none;
    font-size:1.0em;
}
.form_box a:hover {
    color:#000;
    text-decoration:underline;
    font-size:1.0em;
}
.formbox_left {
    margin: 0px;
    padding: 0px;
    float: left;
    width: 260px;
}
.formbox_right {
    padding: 0px 0px 0px 10px;
    width: 260px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    float: left;
}
.formbox_center {
    margin: 0 0 10px;
    padding: 0;
    text-align: center;
}
.form_top {
    margin: 0px;
    padding: 0px;
    height: 20px;
    width: 689px;
}
.form_bot {
    margin: 0px;
    padding: 0px;
    height: 30px;
    width: 689px;
}
#all_users {
    font-size: 0.8em;
    background: #FFF;
    color: #666;
    line-height: 2.4em;
    padding-left:5px;
    margin: 0px;
    border-top: 1px solid #666;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #666;
    width: 273px;
    height:...

JavaScript

$(document).ready(function () {
    // Uncheck each checkbox on body load
    $('#all_users .selectit').each(function () {
        this.checked = false;
    });
    $('#selected_users .selectit').each(function () {
        this.checked = false;
    });

    $('#all_users .selectit').click(function () {
        var userid = $(this).val();
        $('#user' + userid).toggleClass('innertxt_bg');
    });

    $('#selected_users .selectit').click(function () {
        var userid = $(this).val();
        $('#user' + userid).toggleClass('innertxt_bg');
    });

    $("#move_right").click(function () {
        var users = $('#selected_users .innertxt2').size();
        var selected_users = $('#all_users .innertxt_bg').size();

        if (users + selected_users > 5) {
            alert('You can only chose maximum 5 users.');
            return;
        }

        $('#all_users .innertxt_bg').each(function () {
            var user_id = $(this).attr('userid');
            $('#select' + user_id).each(function () {
                this.checked = false;
            });

            var user_clone = $(this).clone(true);
            $(user_clone).removeClass('innertxt');
            $(user_clone).removeClass('innertxt_bg');
            $(user_clone).addClass('innertxt2');

            $('#selected_users').append(user_clone);
            $(this).remove();
        });
    });

    $("#move_left").click(function () {
        $('#selected_users .innertxt_bg').each(function () {
            var user_id = $(this).attr('userid');
            $('#select' + user_id).each(function () {
                this.checked = false;
            });

            var user_clone = $(this).clone(true);
            $(user_clone).removeClass('innertxt2');
            $(user_clone).removeClass('innertxt_bg');
            $(user_clone).addClass('innertxt');

            $('#all_users').append(user_clone);
            $(this).remove();
        });
    });

    $('#view').click(function () {
        var...