Loading multiple load functions?

Hi I’m trying to load 2 external web pages into 1 index page… as shown below:

<script type="text/javascript">        $(document).ready(function() {
            $('#loadExternalWebPage').load('web.html');
        });    
    </script>




<script type="text/javascript">
        $(document).ready(function() {
            $('#loadExternalWebPageAnimation').load('animation.html');
        });    


    </script> 

Then I’m calling them in 2 different locations on the same page…

  &lt;div id="item1" class="item"&gt;
        
        &lt;a name="item1"&gt;&lt;/a&gt;
      &lt;div class="content1"&gt;                
            &lt;a id="web-home" href="#item1" class="panel"&gt;&lt;span&gt;Home / Web&lt;/span&gt;&lt;/a&gt; 
            &lt;a id="animation-home"  href="#item2" class="panel"&gt;&lt;span&gt;Animation&lt;/span&gt;&lt;/a&gt; 
            &lt;a id="print-home" href="#item3" class="panel"&gt;&lt;span&gt;Print&lt;/span&gt;&lt;/a&gt;
            &lt;a id="contact-home" href="#item4" class="panel"&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;  &lt;br&gt;                
           &lt;div id="loadExternalWebPage"&gt;&lt;/div&gt;            
        &lt;/div&gt;  
    &lt;/div&gt;
    
    &lt;div id="item2" class="item"&gt;
        &lt;a name="item2"&gt;&lt;/a&gt;    

<div class=“content2”>
<a id=“web-home2” href="#item1" class=“panel”><span>Home / Web</span></a>
<a id=“animation-home2” href="#item2" class=“panel”><span>Animation</span></a>
<a id=“print-home2” href="#item3" class=“panel”><span>Print</span></a>
<a id=“contact-home2” href="#item4" class=“panel”><span>Contact</span></a> <br>
<div id=“loadExternalWebPageAnimation”></div>
</div>
</div>

At the moment they both work individually then cancel themselves out when together… how can I alter this to make it work?

Thanks

Eddie