Multiple Divs refreshing from mysql database

I am new to php and ajax and i have been trying to create a real time dashboard which updates from a mysql database without the page refreshing. I have been able to create this in my code below however i am struggling on how to adapt this so it will work with multiple sql queries and different Divs.

Currently my code runs the sql query and outputs to the OrderSubmitted Div ID. I am wanting to have output another sql query to the div Id Orders Fulfilled how would i go about doing this?

HTML

          <div class="row">
        <!-- Left Box -->
        <div class="col-lg-6 col-sm-6" style="padding-right:15px; padding-left:0px">
          <div class="well" style="height: 300px;">
            <h2 style="text-align:center; font-size:8em;">
              <div id="SubmittedOrders"></div>
            </h2>
            <p style="text-align:center; font-size:1.5em;">Outstanding Orders</p>
          </div>
        </div>
        <!-- Right Box -->

        <div class="col-lg-6 col-sm-6" style="padding-left:15px; padding-right:0px">
          <div class="well" style="height: 300px;">
            <h2 style="text-align:center; font-size:8em;"> 
              <div id ="OrderFulfilled"></div>
            </h2>
            <p style="text-align:center; font-size:1.5em;">Orders fulfiled today</p>
          </div>
        </div>

      </div>

AJAX script

function getOrderStatus() {

  ?>

    <script>
      // IE5/6 support

      function ajax_loop() {

        if (window.XMLHttpRequest) {
          xmlhttp=new XMLHttpRequest();
        } else {
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        // Create function for handling AJAX response
        // Set dashboard div's contents to the response for Submitted Orders 
        xmlhttp.onreadystatechange=function() {
          if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("SubmittedOrders").innerHTML = xmlhttp.responseText;
            setTimeout(ajax_loop, 1000);
          }
        }

        // Send AJAX request
        xmlhttp.open("POST","getOrderStatus.php");
        xmlhttp.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" );
        xmlhttp.send("action=update");

      }

      ajax_loop();

    </script>  

  <?php

}

getOrderStatus Php File

 <?php
  // Query users table
  $sql = "SELECT COUNT(STATUS) from CE_TRANSACTIONS where STATUS = 0;";

// Execute query 
  $result = mysqli_query( $link, $sql );

// Loop through rows and draw table

  while ( $row = mysqli_fetch_assoc($result) ) {

     foreach ( $row as $field ) {
        echo "$field";
     }
  }

Solution

You are mixing responsibilities of Frontend and backend here.

Your FrontEnd should be a static HTML whith some needed JS code. Then after your trigger (maybe document.ready or some button click) a JS function should do an AJAX call to a PHP file which returns a JSON.

You can call this PHP file from your page using AJAX once for each DIV you want to update.

There are nice tutorials for dynamically changing HTML page contents via AJAX on the JQuery website.

For example here: http://learn.jquery.com/ajax/jquery-ajax-methods/

Some Google Hits: https://www.youtube.com/watch?v=Ga3pOn7wXBA