同一页面中的更多小部件（js）

Question

我创建了一个显示动态窗口小部件的js库，它工作正常但是当我想在同一页面上显示2个窗口小部件时，问题就开始了。实际上我只会显示第二个小部件而我看不到第一个

第一个小部件

<script type="text/javascript">
wgppn_cat = 2;
wgppn_lines = 4;
wgppn_width = '400px';
wgppn_bgcolor = '#00C000';
</script>
<script src="wgppn.js" type="text/javascript"></script>

第二个小部件

<script type="text/javascript">
wgppn_cat = 5;
wgppn_lines = 4;
wgppn_width = '400px';
wgppn_bgcolor = '#FF0000';
</script>
<script src="wgppn.js" type="text/javascript"></script>

这是我的js库wgppn.js

    var wgppn_lines; 
    var wgppn_width; 
    var wgppn_bgcolor;
    var wgppn_cat;

    wgppn_width = typeof wgppn_width == 'string' ? wgppn_width : '300px';
          wgppn_lines = typeof wgppn_lines == 'number' ? wgppn_lines : 3;
    wgppn_bgcolor = typeof wgppn_bgcolor == 'string' ? wgppn_bgcolor : '#003366';
    wgppn_cat = typeof wgppn_cat == 'number' ? wgppn_cat : 0;


    var script_tag = document.createElement('link');
          script_tag.setAttribute("type","text/css");
          script_tag.setAttribute("rel","stylesheet");
          script_tag.setAttribute("href","style.css");
          (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);


    var script_tag1 = document.createElement('script');
    script_tag1.setAttribute("type","text/javascript");
    script_tag1.setAttribute("src","jquery-latest.pack.js");    
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag1);

    var script_tag3 = document.createElement('div');
    script_tag3.setAttribute("id",'box');   
    (document.getElementsByTagName("body")[0] || document.documentElement).appendChild(script_tag3);

    var myRequest = CreateXmlHttpReq(myHandler);
    var url = window.location.href;
    myRequest.open("GET",url,true);
    myRequest.send(null);

    function CreateXmlHttpReq(handler) {
                var xmlhttp = null;
                try {
                     xmlhttp = new XMLHttpRequest();
                    }
                catch(e) {
                             try {
                                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                                 } 
                            catch(e) {
                                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                                     }
                                 }
              xmlhttp.onreadystatechange = handler;
              return xmlhttp;
    }

    function myHandler() {
        if (myRequest.readyState == 1) {
            var wHTML = ""; 
           wHTML += ('<div style="text-align:center;margin-top:180px;">');          
           wHTML += ('<img src="loader.gif" border="0" width="66" height="66"/>');
           wHTML += ('</div>');
           document.getElementById('box').innerHTML = wHTML;
        }       
        if (myRequest.readyState == 4 && myRequest.status == 200) {
        loadcontent(wgppn_lines,wgppn_width,wgppn_bgcolor,wgppn_cat);

        }
    }


function loadcontent(wgppn_lines,wgppn_width,wgppn_bgcolor,wgppn_cat) {

    $(document).ready(function($) {

         var url = "data.asp?ln=" + wgppn_lines + "&cat=" + wgppn_cat
                    $.ajax({     
                            url: url,     
                            dataType: 'json', 
                            scriptCharset: 'utf-8' , 
                            contentType: 'application/x-www-form-urlencoded',
                            success: processJSON
                    });

            $('#box').css("width",wgppn_width);            

            });

    }

    function processJSON(result) { 

            var wHTML = ""; 
            wHTML += ('<div class="titolo_box" style="background-color:' + wgppn_bgcolor + '"></div>');
            wHTML += ('<ul>');  
            jQuery.each(result.news, function(i,val){

                wHTML += ('<li>');  
                wHTML += ('<div class="titolo_triplo">');
                wHTML += ('<img class="img3" src="' + val.pic + '" border="0" width="40" height="40"/>');
                wHTML += ('<a href="' + val.url + '" target="_blank" title="' + val.title + '">' + val.title + '</a>');           
                wHTML += ('</div>');    
                wHTML += ('<div class="strillo_triplo">');
                wHTML += ('<a href="' + val.url + '" target="_blank"  title="' + val.title + '">' + val.strillo + '</a>');            
                wHTML += ('</div>');                                      
                wHTML += ('</li>'); 
            }); 
            wHTML += ('</ul>');
            document.getElementById('box').innerHTML = wHTML;
    }