Elsa

form.js

  $('#selectbox1').each(function () {

        // Cache the number of options
        var $this = $(this),
            numberOfOptions = $(this).children('option').length;

        // Hides the select element
        $this.addClass('s-hidden');

        // Wrap the select element in a div
        $this.wrap('<div class="select"></div>');

        // Insert a styled div to sit over the top of the hidden select element
        $this.after('<div class="styledSelect-1"></div>');

        // Cache the styled div
        var $styledSelect = $this.next('div.styledSelect-1');

        // Show the first select option in the styled div
        $styledSelect.text($this.children('option').eq(0).text());

        // Insert an unordered list after the styled div and also cache the list
        var $list = $('<ul />', {
            'class': 'options'
        }).insertAfter($styledSelect);

        // Insert a list item into the unordered list for each select option
        for (var i = 0; i < numberOfOptions; i++) {
            $('<li />', {
                text: $this.children('option').eq(i).text(),
                rel: $this.children('option').eq(i).val()
            }).appendTo($list);
        }

        // Cache the list items
        var $listItems = $list.children('li');

        // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
        $styledSelect.click(function (e) {
            console.log('styled select clicked')
            console.log('this', $(this))
            e.stopPropagation();
            $('div.styledSelect-1.active').each(function () {
                $(this).removeClass('active').next('ul.options').hide();
            });
            $(this).toggleClass('active').next('ul.options').toggle();
        });

        // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
        // Updates the select element to have the value of the equivalent option
        $listItems.click(function (e) {
            e.stopPropagation();
            $styledSelect.text($(this).text()).removeClass('active');
            $this.val($(this).attr('rel'));
            $list.hide();
            /* alert($this.val()); Uncomment this for demonstration! */
        });

        // Hides the unordered list when clicking outside of it
        $(document).click(function () {
            $styledSelect.removeClass('active');
            $list.hide();
        });

        $('#dropdown-section-1').on('click', function (e) {
            console.log('clicking dropdown-section-1')
            e.stopPropagation();
            $styledSelect.triggerHandler('click'); //element js will click
        });

        $('#dropdown-arrow-1').on('click', function (e) {
            e.stopPropagation();
            $styledSelect.triggerHandler('click'); //element js will click
        });

    });

    $('#selectbox2').each(function () {

        // Cache the number of options
        var $this = $(this),
            numberOfOptions = $(this).children('option').length;

        // Hides the select element
        $this.addClass('s-hidden');

        // Wrap the select element in a div
        $this.wrap('<div class="select"></div>');

        // Insert a styled div to sit over the top of the hidden select element
        $this.after('<div class="styledSelect-2"></div>');

        // Cache the styled div
        var $styledSelect = $this.next('div.styledSelect-2');

        // Show the first select option in the styled div
        $styledSelect.text($this.children('option').eq(0).text());

        // Insert an unordered list after the styled div and also cache the list
        var $list = $('<ul />', {
            'class': 'options'
        }).insertAfter($styledSelect);

        // Insert a list item into the unordered list for each select option
        for (var i = 0; i < numberOfOptions; i++) {
            $('<li />', {
                text: $this.children('option').eq(i).text(),
                rel: $this.children('option').eq(i).val()
            }).appendTo($list);
        }

        // Cache the list items
        var $listItems = $list.children('li');

        // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
        $styledSelect.click(function (e) {
            console.log('styled select clicked')
            console.log('this', $(this))
            e.stopPropagation();
            $('div.styledSelect-2.active').each(function () {
                $(this).removeClass('active').next('ul.options').hide();
            });
            $(this).toggleClass('active').next('ul.options').toggle();
        });

        // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
        // Updates the select element to have the value of the equivalent option
        $listItems.click(function (e) {
            e.stopPropagation();
            $styledSelect.text($(this).text()).removeClass('active');
            $this.val($(this).attr('rel'));
            $list.hide();
            /* alert($this.val()); Uncomment this for demonstration! */
        });

        // Hides the unordered list when clicking outside of it
        $(document).click(function () {
            $styledSelect.removeClass('active');
            $list.hide();
        });

        $('#dropdown-section-2').on('click', function (e) {
            console.log('clicking dropdown-section-1')
            e.stopPropagation();
            $styledSelect.triggerHandler('click'); //element js will click
        });

        $('#dropdown-arrow-2').on('click', function (e) {
            e.stopPropagation();
            $styledSelect.triggerHandler('click'); //element js will click
        });

    });

For each select box you need to swap out the following values:

#selectbox1

styledSelect-1

#dropdown-section-1

#dropdown-arrow-1

You can see in the second half of the code everything is appended with a "2" instead of a "1"

That being said I don't recommend this. Every time you have a new select box you need add a good chunk of code and someone is likely to forget to do that. For the sake of maintainability I'd stay away from this.