Javascript Ajax jQuery Html PHP Example Quiz New MORE
Need a Website Or Web Application Or Any Help.Contact Us: +91 9437911966 (Whatsapp) Note: Paid Service

How to Add list items in specific order jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<style>
    .container {
        width: 900px;
        margin: 0 auto;
    }

    .container ul li {
        border: 1px solid #000;
        border-radius: 5px;
        list-style: none outside none;
        margin-bottom: 10px;
        margin-right: 30px;
        padding: 5px;
    }

    .container ul li:hover {
        background-color: #F2FFF2;
        cursor: pointer;
    }

    div.left {
        border: 1px solid #000;
        border-radius: 5px;
        width: 350px;
        margin-right: 15px;
        float: left;
        min-height: 250px;
    }

    div.right {
        border: 1px solid #000;
        border-radius: 5px;
        width: 350px;
        margin-right: 15px;
        float: left;
        min-height: 250px;
    }
</style>
<body>
    <div class="container">
        <div class="left">
            <ul></ul>
        </div>
        <div class="right">
            <ul>
                <li data-order="1">Item 1</li>
                <li data-order="2">Item 2</li>
                <li data-order="3">Item 3</li>
                <li data-order="4">Item 4</li>
                <li data-order="5">Item 5</li>
                <li data-order="6">Item 6</li>
                <li data-order="7">Item 7</li>
                <li data-order="8">Item 8</li>
                <li data-order="9">Item 9</li>
                <li data-order="10">Item 10</li>
            </ul>
        </div>
        <div style="clear:both;"></div>
    </div>
    <script>
        jQuery(document).ready(function() {
            jQuery("div.right").delegate("ul li", "click", function() {
                jQuery("div.left ul").append(jQuery(this));
                var sortedLis = jQuery("div.left ul").find(" li").sort(function(a, b) {
                    var first = $(a).data('order');
                    var second = $(b).data('order');
                    return parseInt(first) - parseInt(second);
                });
                jQuery("div.left ul").empty().append(sortedLis);
            });
        });
    </script>
</body>
</html>

Run it yourself