makin unorderedlist with my method for styling checkboxes

See more:

Javascript

CSS

HTML

, +

right now i have it in a fieldset

my list of checkboxes are in 1 row

i want 3 or 4 rows instead of 1 so it looks alot more neat

I am working on making a online ordering site for a restaurant. for example like how you can order dominoes pizza online or subway.
I am working with a restaurant on making it so you can order food online.
I have everything set up and working pretty good right now.

The reason i want these checkboxes in a unordered list is so i can style it.
my checkboxes currently are displayed in one long list
I would like to have them in rows of 3 or 4 boxes per row.

my code (this method) grabs data from a collection and displays it as checkboxes in its certain section on the page.
This is just one method of my many for this site.

I have been trying many different orders and differnt things to try to get this to work but i did not yet.
this is my most current sample

if you know a better solution then an unordered list to style my checkboxes i am grateful to hear it.

http://s13.postimg.org/8b6gg8byf/Untitled.png[^]

<!-- Select fillings -->

    <div id="selectFillings">

        <div id="fillingValid" class="validation alert"></div>

        <fieldset id="fillings">

            <legend><h4>4). Choose up to two fillings (Extra + $1.20)</h4></legend>

            <table id="fillingsTable"></table>

        </fieldset>

    </div>


function initializeCheckBox(elementName, dataService, render, name) {

    if (render === null) render = function(item) { return(item.text); };

    var $element = $(elementName);       

    $.when(dataService()).then(function (data) {

        var $unorderedList = $('ul class="stylebox"');

        $element.append($unorderedList);

        console.log($unorderedList);


        for (var itemIndex in data) {

            var $input = $('<input type="checkbox" name ="'+name+'" value="' + data[itemIndex].value + '">' + render(data[itemIndex]) + '</input>');

            var $row = $('<li>');

            $input.data(data[itemIndex]);

            $input.appendTo($element);

        }

    });

}


function initializeRadioBtn(elementName, dataService) {

    var $element = $(elementName);

    $.when(dataService()).then(function (data) {

        for (var itemIndex in data) {

            var $input = $('<input type="radio" name ="Side" value="' + data[itemIndex].value + '">' + data[itemIndex].text + '</input>');

            $input.data(data[itemIndex]);

            $input.appendTo($element);

        }

    });

}


 */

function getFillings() {

    var deferred = new $.Deferred();

    deferred.resolve([

        { value: 'Turkey Breast', text: 'Turkey Breast', price: 0.0 },

        { value: 'Baked Ham', text: 'Baked Ham', price: 0.0 },

        { value: 'Salami', text: 'Salami', price: 0.0 },

        { value: 'Cheddar Cheese', text: 'Cheddar Cheese', price: 0.0 },

        { value: 'Swiss Cheese', text: 'Swiss Cheese', price: 0.0 },

        { value: 'Provologne Cheese', text: 'Provologne Cheese', price: 0.0 },

        { value: 'Veggie Mix', text: 'Veggie Mix', price: 0.0 }

    ]);

    return (deferred);

}