Bootstrap Form Helper w Advanced Selection Options

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//nwica.technotarek.com/inc/form-helpers/css/bootstrap-formhelpers.css">
<script src="//nwica.technotarek.com/inc/form-helpers/js/bootstrap-formhelpers-selectbox.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<div class="container">
    <div class="row">
        <div class="span12">
            <h4>Registrants</h4>
                        <div class="bfh-selectbox">
                            <input type="hidden" name="selectbox3" value="">
                            <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
                                <span class="bfh-selectbox-option input-medium">Select Registrant(s)</span>
                                <b class="caret"></b>
                            </a>
                            <div class="bfh-selectbox-options">
                                <input type="text" class="bfh-selectbox-filter">
                                <ul role="options" class="members">
                                     <li class="reg-select" data-name="Annie Agency" data-uid="001"><a tabindex='-1' data-option='Annie Agency'>Annie Agency</a></li>
                                     <li class="reg-select" data-name="Dan Dogooder" data-uid="002"><a tabindex='-1' data-option='Dan Dogooder'>Don Dogooder</a></li>
                                     <li class="reg-select" data-name="Frank Family" data-uid="003"><a tabindex='-1' data-option='Frank Family'>Frank Family</a></li>
                                     <li class="reg-select" data-name="Mary Member" data-uid="004"><a tabindex='-1' data-option='mary member'>Mary Member</a></li>
                                </ul>
                        ...

JavaScript

// === GROUP REGISTRATION WIDGET for Bootstrap Form Helper Dropdown === //

        // For each person added to the registration...
        $('.reg-select').click(function() {

            // get their info
            var regName = $(this).data('name');
            var regUID = $(this).data('uid');
            var regInfo =   '<div class="row registrant" data-uid="'+regUID+'" data-name="'+regName+'">' +
                            '<div class="span2"><h6>Registrant</h6><h5><i class="icon-user"></i> ' +  regName + '</h5></div>' +
                            '<div class="span3"><h6>Special Needs</h6><textarea></textarea></div>' +
                            '<a class="btn btn-mini btn-danger remove"><i class="icon-remove"></i></a>' +
                            '<input type="hidden" value="'+regUID+'" name="regUIDs[]">' +
                            '</div>';
             // create a new set of form elements to collect the registrant's info
             $('.regs').append(regInfo);

             // remove them added person from the dropdown (to avoid 2x registration)
             $(this).hide();
        });

        // Remove a registrant from list of people to register
        $('.regs').on('click', '.remove', function() {

            // get the data necessary, and add them back to the dropdown list
            var regUID = $(this).parent('div').data('uid');
            var regName = $(this).parent('div').data('name');

            // confirm deletion
            if(confirm("Are you sure you want to remove the registration for "+regName+"?")){

                removeReg(this,regName);

                function removeReg(selector,regName) {
                    // remove the registrant from the list
                    $(selector).parent('div.registrant').remove();
                    // add them back to the dropdown of potential registrants
                    $('li[data-uid="'+regUID+'"]').show();
                }
            }

        });