I'm having an issue with this code
PHP Code:
<head>
<style>
    div.div_3sg
    {
        width: 100%;
    }
    div.tab_3sg
    {
        border: 1px solid;
        margin: auto;
        clear: both;
        height: 120px;
        width: 98%;
        padding-left: 4px;

    }
    #tabs li {
        list-style: none outside none;
    }
    #tabs ul {
        padding: 0;
        border-bottom: 0 none !important;
    }

    #tabs li, #tabs li a {
        float: left;
    }
    #tabs ul li{
        font-weight: bold;
        padding: 8px;
        text-decoration: none;
        cursor: pointer;
    }
</style>
</head>
<script type="text/javascript">
    document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'>\<\/script>");
</script>
<body>
<div id="tabs" class="div_3sg">
    <div style="display: block; float: left; ">
       <ul>
<script type="text/javascript">
    jQuery.getJSON( "include_js.php",function(data){
        jQuery.each(data.groups, function(id, group){
            var a=1;
            document.writeln('<li id="#tab-'+(id+1)+'">A'+group.name+'</li>');

        });
    });

</script>
       </ul>
    </div>
</div>

</body> 
That code produces the following result.

PHP Code:
<li id="#tab-1">AEvents</li>
<li id="#tab-2">AGroups</li>
<li id="#tab-3">AInformation</li> 
Can anyone see why its freaking out and clearing everything off the page.