Can anyone tell me what an I doing wrong in this code and how can I solve it? : HTML

        <div class="container1">
       <div id="container-table"></div>
       <div id="container-tablec"></div>
       <div id="container-tableq"></div>
       <div id="container-table"></div>
       <div id="container-table"></div>
      </div>

JavaScript

    <script>
      $('document').ready(function(){
          refreshData();
      })
    
      function refreshData() {
          $('#container-table').load("data.php", function(){
              setTimeout(refreshData, 10000);
          });
      }
    </script>
    
    <script>
      $('document').ready(function(){
          refreshData();
      })
    
      function refreshData() {
          $('#container-tablec').load("datacex.php", function(){
              setTimeout(refreshData, 10000);
          });
      
      }
    </script>
    
    
    <script>
      $('document').ready(function(){
          refreshData();
      })
    
      function refreshData() {
          $('#container-tableq').load("dataquad.php", function(){
              setTimeout(refreshData, 10000);
          });
      }
    </script>

I'm trying to integrate theses three APIs in my HTML website. But the problem that I'm facing is that every time subsequent <script> cancels out the previous one and only the last one runs.


