JQuery UI - sort, add, remove from list

by Alvin Olavarrieta

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>


<ul class="list-unstyled questions">

    <li class="question active">
        <div class="head">
            <i class="fa fa-chevron-down"></i>
            <label>Accounting &amp; Finance <em>(9 Job Titles)</em></label>
        </div>
        <div class="opts hide">
            <label class="checkbox-inline">
                <input type="checkbox"> <span>Accounting Assistant</span> <em>$34,410</em>
                    </label>
                <label class="checkbox-inline">
                    <input type="checkbox"> <span>Billing Specialist</span> <em>$34,410</em>
                        </label>
                    <label class="checkbox-inline">
                        <input type="checkbox"> <span>Accounting Bookkeeper</span> <em>$65,940</em>
                            </label>
                        <label class="checkbox-inline">
                            <input type="checkbox"> <span>Bank Manager</span> <em>$115,320</em>
                                </label>
                            <label class="checkbox-inline">
                                <input type="checkbox"> <span>Branch Manager</span> <em>$115,320</em>
                                    </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox"> <span>Certified Public Accountant</span> <em>$65,940</em>
                                        </label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox"> <span>Financial Advisor</span> <em>$78,620</em>
                                            </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox"> <span>Financial Analyst</span> <em>$78,620</em>
                                                </label>
               ...

JavaScript

var count = 1;
            $('.question .opts [type="checkbox"]').each(function (index, input) {
                $(this).attr("data-id", +count++)
            });            


            $('.selected-job-titles').sortable({
                update: function (event, ui) {
                    var $lis = $(this).children('li');
                    $lis.each(function () {
                        var $li = $(this);
                        var newVal = $(this).index() + 1;
                        $(this).children('.sortable-number').html(newVal);
                    });
                }
            });//.disableSelection();


            // Add item list
            $('.question .opts [type="checkbox"]').on('click', function (e) {
                if ($('.selected-job-titles li').size() <= 9) {
                    var checked = $(this).parent().parent().find(':checked').length;
                    if (checked <= 4) {
                        var countLi = $('.selected-job-titles li').size() + 1;
                        var checkedText = $(this).parent().find('span').text();
                        $('<li><span class="sortable-number">' + countLi + '</span><strong>' + checkedText + '</strong> <a href="#" class="remove" data-id="' + $(this).data('id') + '"><i class="fa fa-times"></i></a></li>').appendTo('.selected-job-titles');
                        $(this).prop('disabled', true);
                    }
                    if (checked == 4) {
                        $(this).parent().parent().find('[type="checkbox"]').prop('disabled', true);
                    }
                }
                if ($('.selected-job-titles li').size() >= 10) {
                    $('.opts .checkbox-inline > [type="checkbox"]').prop('disabled', true);
                }
            });

            // Remove item from list
            $(document).on('click', 'a.remove', function (event) {
                $(this).parent().fadeOut(200, function () {
                    $(this).remove();
   ...