Checkboxes styling like a Treeview

ive looked for solutions and through similar questions and none of these have helped me in achieving what i am looking to do. i want to achieve this kind of styling for my checkboxes so that it is somewhat similar to a treeview:

Style checkboxes like jsFiddle

so that is the style and functionability im going for. However if you take this code and paste it into a c# view like mine the outcome is more like this:

current stylesheet:

ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
    margin: 0 0 0 20px;
}

as you can see the code here generated in the same way as the fiddle above but the first descendants of each parent are being pushed to the right. I want to make it so it all aligns nicely like in the fiddle but i cant seem to accomplish this. Anyone have any ideas or know how to do this?

---

Edit:

<div>
    <ul style="display: list-item" id="root"></ul>
</div>

<script>
    var data = {
        id: 0,
        title: "root - not displayed",
        children: [
            <%int x = 0;
    int y = 0;
    int a = 0;

    foreach (var areaOfBusiness in Model.Regions)
       {
           x = x + 1;%>
{
                id: '<%: "id-" + x %>',
                title: '<%: areaOfBusiness.Text %>',

            children: [

                <% foreach (var sub in Model.SubRegions)
                       {
                           if (sub.RegionId.ToString() == areaOfBusiness.Value)
    { y = y + 1;%>
                {
                    id: '<%: "id-" + x + "-" + y%>',
                    title: '<%: sub.Name %>',

                    children: [
                        <% foreach (var country in Model.AOBCountries)
                           {
                               if (country.SubRegionId == sub.Id)
                               {
                                   a = a + 1;%>
                        {
                            id: '<%: "Country_id-" + x + "-" + y + "-" + a %>',
                            title: '<%: country.Name %>',
                            value: '<%: "Country_id-" + country.Id %>'
                        },
                        <% } %>
                        <% } %>
                    ]
                },
                <% } %>
             <% } %>  
           ]
},
<% } %>  
            ]
        };

    function addItem(parentUL, branch) {
        for (var key in branch.children) {
            var item = branch.children[key];
            $item = $('<li>', {
                id: item.id
            });
          $item.append($('<input>', {
                type: "checkbox",
                id: item.id,
                name: item.value
            }));
            $item.append($('<label>', {
                for: item.id,
                text: item.title
            }));
            parentUL.append($item);
            if (item.children) {
                var $ul = $('<ul>', {
                    style: 'display: none'
                }).appendTo($item);
                $item.append();
                addItem($ul, item);
            }
        }
    }

    $(function () {
        addItem($('#root'), data);
        $(':checkbox').click(function () {
            $(this).find(':checkbox').trigger('click');
            var matchingId = $(this).attr('id');
            if ($(this).attr('checked')) {
                $('input[id*=' + matchingId + ']').each(function () {
                    $(this).removeAttr('checked');
                    $(this).prop('checked', $(this).attr('checked'));
                });
            }
            else {
                $('input[id*=' + matchingId + ']').each(function () {
                    $(this).attr('checked', 'checked');
                    $(this).prop('checked', $(this).attr('checked'));
                });
            }
        });
        $('label').click(function () {
            $(this).closest('li').children('ul').slideToggle();

        });
    });

Update: Code included at bottom, hopefully that helps and that's all i have to it.