Hi, first of all let me thank anyone willing to help out with this. Jquery / Ajax update Span or Div by ID without refreshing page

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta http-equiv="refresh" content="60"> <!-- Esta línea hará que la página se actualice automáticamente cada 15 segundos-->
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
            <meta name="description" content="" />
            <meta name="author" content="" />
            <title>Freelancer - Start Bootstrap Theme</title>
            <!-- Favicon-->
            <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
            <!-- Font Awesome icons (free version)-->
            <script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
            <!-- Google fonts-->
            <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
            <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
            <!-- Core theme CSS (includes Bootstrap)-->
            <link href="css/styles.css" rel="stylesheet" />

            <!-- jQuery library -->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
            <!-- Latest compiled JavaScript -->
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

        </head>
        <body id="page-top">

            <!-- Navigation-->
            <nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
                <div class="container">
                    <a class="navbar-brand" href="#page-top">Start Bootstrap</a>
                    <button class="navbar-toggler text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                        Menu
                        <i class="fas fa-bars"></i>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarResponsive">
                        <ul class="navbar-nav ms-auto">
                            <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#portfolio">Portfolio</a></li>
                            <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#about">About</a></li>
                            <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#contact">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- Masthead-->
            <header class="masthead bg-primary text-white text-center">
                <div class="container d-flex align-items-center flex-column">
                    <!-- Masthead Avatar Image-->
                    <img class="masthead-avatar mb-5" src="assets/img/avataaars.svg" alt="..." />
                    <!-- Masthead Heading-->
                    <h1 class="masthead-heading text-uppercase mb-0">ESP32 - VALVERDE</h1>
                    <!-- Icon Divider-->
                    <div class="divider-custom divider-light">
                        <div class="divider-custom-line"></div>
                        <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                        <div class="divider-custom-line"></div>
                    </div>
                    <!-- Masthead Subheading-->
                    <p class="masthead-subheading font-weight-light mb-0">Graphic Artist - Web Designer - Illustrator</p>
                </div>
            </header>
            <!-- Portfolio Section-->
            <section class="page-section portfolio" id="portfolio">
                <div class="container">
                    <!-- Portfolio Section Heading-->
                    <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Portfolio</h2>
                    <!-- Icon Divider-->
                    <div class="divider-custom">
                        <div class="divider-custom-line"></div>
                        <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                        <div class="divider-custom-line"></div>
                    </div>
                    <!-- Portfolio Grid Items-->
                    <div class="row justify-content-center">
                        <!-- Portfolio Item 1-->
                        <div class="col-md-6 col-lg-4 mb-5">
                            <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal1">
                                <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
                                    <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
                                </div>
                                <img class="img-fluid" src="assets/img/portfolio/cabin.png" alt="..." />
                            </div>
                        </div>
                        <!-- Portfolio Item 2-->
                        <div class="col-md-6 col-lg-4 mb-5">
                            <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal2">
                                <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
                                    <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
                                </div>
                                <img class="img-fluid" src="assets/img/portfolio/cake.png" alt="..." />
                            </div>
                        </div>
                        <!-- Portfolio Item 3-->
                        <div class="col-md-6 col-lg-4 mb-5">
                            <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal3">
                                <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
                                    <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
                                </div>
                                <img class="img-fluid" src="assets/img/portfolio/circus.png" alt="..." />
                            </div>
                        </div>
                        <!-- Portfolio Item 4-->
                        <div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
                            <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal4">
                                <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
                                    <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
                                </div>
                                <img class="img-fluid" src="assets/img/portfolio/game.png" alt="..." />
                            </div>
                        </div>
                        <!-- Portfolio Item 5-->
                        <div class="col-md-6 col-lg-4 mb-5 mb-md-0">
                            <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal5">
                                <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
                                    <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
                                </div>
                                <img class="img-fluid" src="assets/img/portfolio/safe.png" alt="..." />
                            </div>
                        </div>
                        <!-- Portfolio Item 6-->
                        <div class="col-md-6 col-lg-4">
                            <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal6">
                                <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
                                    <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
                                </div>
                                <img class="img-fluid" src="assets/img/portfolio/submarine.png" alt="..." />
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- About Section-->
            <section class="page-section bg-primary text-white mb-0" id="about">
                <div class="container">
                    <!-- About Section Heading-->
                    <h2 class="page-section-heading text-center text-uppercase text-white">About</h2>
                    <!-- Icon Divider-->
                    <div class="divider-custom divider-light">
                        <div class="divider-custom-line"></div>
                        <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                        <div class="divider-custom-line"></div>
                    </div>
                    <!-- About Section Content-->
                    <div class="row">
                        <div class="col-lg-4 ms-auto"><p class="lead">Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional SASS stylesheets for easy customization.</p></div>
                        <div class="col-lg-4 me-auto"><p class="lead">You can create your own custom avatar for the masthead, change the icon in the dividers, and add your email address to the contact form to make it fully functional!</p></div>
                    </div>
                    <!-- About Section Button-->
                    <div class="text-center mt-4">
                        <a class="btn btn-xl btn-outline-light" href="https://startbootstrap.com/theme/freelancer/">
                            <i class="fas fa-download me-2"></i>
                            Free Download!
                        </a>
                    </div>
                </div>
            </section>
            <!-- Contact Section-->
            <section class="page-section" id="contact">
                <div class="container">
                    <!-- Contact Section Heading-->
                    <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Contact Me</h2>
                    <!-- Icon Divider-->
                    <div class="divider-custom">
                        <div class="divider-custom-line"></div>
                        <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                        <div class="divider-custom-line"></div>
                    </div>
                    <!-- Contact Section Form-->
                    <div class="row justify-content-center">
                        <div class="col-lg-8 col-xl-7">
                            <!-- * * * * * * * * * * * * * * *-->
                            <!-- * * SB Forms Contact Form * *-->
                            <!-- * * * * * * * * * * * * * * *-->
                            <!-- This form is pre-integrated with SB Forms.-->
                            <!-- To make this form functional, sign up at-->
                            <!-- https://startbootstrap.com/solution/contact-forms-->
                            <!-- to get an API token!-->
                            <form id="contactForm" data-sb-form-api-token="API_TOKEN">
                                <!-- Name input-->
                                <div class="form-floating mb-3">
                                    <input class="form-control" id="name" type="text" placeholder="Enter your name..." data-sb-validations="required" />
                                    <label for="name">Full name</label>
                                    <div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
                                </div>
                                <!-- Email address input-->
                                <div class="form-floating mb-3">
                                    <input class="form-control" id="email" type="email" placeholder="name@example.com" data-sb-validations="required,email" />
                                    <label for="email">Email address</label>
                                    <div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
                                    <div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
                                </div>
                                <!-- Phone number input-->
                                <div class="form-floating mb-3">
                                    <input class="form-control" id="phone" type="tel" placeholder="(123) 456-7890" data-sb-validations="required" />
                                    <label for="phone">Phone number</label>
                                    <div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
                                </div>
                                <!-- Message input-->
                                <div class="form-floating mb-3">
                                    <textarea class="form-control" id="message" type="text" placeholder="Enter your message here..." style="height: 10rem" data-sb-validations="required"></textarea>
                                    <label for="message">Message</label>
                                    <div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
                                </div>
                                <!-- Submit success message-->
                                <!---->
                                <!-- This is what your users will see when the form-->
                                <!-- has successfully submitted-->
                                <div class="d-none" id="submitSuccessMessage">
                                    <div class="text-center mb-3">
                                        <div class="fw-bolder">Form submission successful!</div>
                                        To activate this form, sign up at
                                        <br />
                                        <a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
                                    </div>
                                </div>
                                <!-- Submit error message-->
                                <!---->
                                <!-- This is what your users will see when there is-->
                                <!-- an error submitting the form-->
                                <div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
                                <!-- Submit Button-->
                                <button class="btn btn-primary btn-xl disabled" id="submitButton" type="submit">Send</button>
                            </form>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Footer-->
            <footer class="footer text-center">
                <div class="container">
                    <div class="row">
                        <!-- Footer Location-->
                        <div class="col-lg-4 mb-5 mb-lg-0">
                            <h4 class="text-uppercase mb-4">Location</h4>
                            <p class="lead mb-0">
                                2215 John Daniel Drive
                                <br />
                                Clark, MO 65243
                            </p>
                        </div>
                        <!-- Footer Social Icons-->
                        <div class="col-lg-4 mb-5 mb-lg-0">
                            <h4 class="text-uppercase mb-4">Around the Web</h4>
                            <a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-facebook-f"></i></a>
                            <a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-twitter"></i></a>
                            <a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-linkedin-in"></i></a>
                            <a class="btn btn-outline-light btn-social mx-1" href="#!"><i class="fab fa-fw fa-dribbble"></i></a>
                        </div>
                        <!-- Footer About Text-->
                        <div class="col-lg-4">
                            <h4 class="text-uppercase mb-4">About Freelancer</h4>
                            <p class="lead mb-0">
                                Freelance is a free to use, MIT licensed Bootstrap theme created by
                                <a href="http://startbootstrap.com">Start Bootstrap</a>
                                .
                            </p>
                        </div>
                    </div>
                </div>
            </footer>
            <!-- Copyright Section-->
            <div class="copyright py-4 text-center text-white">
                <div class="container"><small>Copyright &copy; Your Website 2022</small></div>
            </div>
            <!-- Portfolio Modals-->
            <!-- Portfolio Modal 1-->
            <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" aria-labelledby="portfolioModal1" aria-hidden="true">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
                        <div class="modal-body text-center pb-5">
                            <div class="container">
                                <div class="row justify-content-center">
                                    <div class="col-lg-8">
                                        <!-- Portfolio Modal - Title-->
                                        <h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Control ON/OFF</h2>
                                        <!-- Icon Divider-->
                                        <div class="divider-custom">
                                            <div class="divider-custom-line"></div>
                                            <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                                            <div class="divider-custom-line"></div>
                                        </div>
                                        <!-- Portfolio Modal - Image-->
                                        <img class="img-fluid rounded mb-5" src="assets/img/portfolio/cabin.png" alt="..." />
                                        <!-- Portfolio Modal - Text-->
                                        <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>

                                        <div STYLE="overflow: auto;">

                                        <?php
                                        include("database_connect.php"); //We include the database_connect.php which has the data for the connection to the database


                                        // Check the connection
                                        if (mysqli_connect_errno()) {
                                          echo "Failed to connect to MySQL: " . mysqli_connect_error();
                                        }
                                        //Again, we grab the table out of the database, name is ESPtable2 in this case
                                        $result = mysqli_query($con,"SELECT * FROM ESPtable2");//table select



                                        //Now we create the table with all the values from the database   
                                        echo "<table class='table' style='font-size: 30px;'>
                                            <thead>
                                                <tr>
                                                <th>Control ON/OFF</th> 
                                                </tr>
                                            </thead>

                                            <tbody>
                                              <tr class='active'>
                                                <td>Noobix ID</td>
                                                <td>Boolean control 1</td>
                                                <td>Boolean control 2 </td>
                                                <td>Boolean control 3 </td>
                                                <td>Boolean control 4</td>
                                                <td>Boolean control 5 </td>     
                                              </tr>  
                                                ";

                                        //loop through the table and print the data into the table
                                        while($row = mysqli_fetch_array($result)) {

                                           echo "<tr class='success'>";     
                                            $unit_id = $row['id'];
                                            echo "<td>" . $row['id'] . "</td>";

                                            $column1 = "RECEIVED_BOOL1";
                                            $column2 = "RECEIVED_BOOL2";
                                            $column3 = "RECEIVED_BOOL3";
                                            $column4 = "RECEIVED_BOOL4";
                                            $column5 = "RECEIVED_BOOL5";

                                            $current_bool_1 = $row['RECEIVED_BOOL1'];
                                            $current_bool_2 = $row['RECEIVED_BOOL2'];
                                            $current_bool_3 = $row['RECEIVED_BOOL3'];
                                            $current_bool_4 = $row['RECEIVED_BOOL4'];
                                            $current_bool_5 = $row['RECEIVED_BOOL5'];

                                            if($current_bool_1 == 1){
                                            $inv_current_bool_1 = 0;
                                            $text_current_bool_1 = "ON";
                                            $color_current_bool_1 = "#6ed829";
                                            }
                                            else{
                                            $inv_current_bool_1 = 1;
                                            $text_current_bool_1 = "OFF";
                                            $color_current_bool_1 = "#e04141";
                                            }


                                            if($current_bool_2 == 1){
                                            $inv_current_bool_2 = 0;
                                            $text_current_bool_2 = "ON";
                                            $color_current_bool_2 = "#6ed829";
                                            }
                                            else{
                                            $inv_current_bool_2 = 1;
                                            $text_current_bool_2 = "OFF";
                                            $color_current_bool_2 = "#e04141";
                                            }


                                            if($current_bool_3 == 1){
                                            $inv_current_bool_3 = 0;
                                            $text_current_bool_3 = "ON";
                                            $color_current_bool_3 = "#6ed829";
                                            }
                                            else{
                                            $inv_current_bool_3 = 1;
                                            $text_current_bool_3 = "OFF";
                                            $color_current_bool_3 = "#e04141";
                                            }


                                            if($current_bool_4 == 1){
                                            $inv_current_bool_4 = 0;
                                            $text_current_bool_4 = "ON";
                                            $color_current_bool_4 = "#6ed829";
                                            }
                                            else{
                                            $inv_current_bool_4 = 1;
                                            $text_current_bool_4 = "OFF";
                                            $color_current_bool_4 = "#e04141";
                                            }


                                            if($current_bool_5 == 1){
                                            $inv_current_bool_5 = 0;
                                            $text_current_bool_5 = "ON";
                                            $color_current_bool_5 = "#6ed829";
                                            }
                                            else{
                                            $inv_current_bool_5 = 1;
                                            $text_current_bool_5 = "OFF";
                                            $color_current_bool_5 = "#e04141";
                                            }


                                            echo "<td><form action= update_values.php method= 'post'>
                                            <input type='hidden' name='value2' value=$current_bool_1   size='15' >  
                                            <input type='hidden' name='value' value=$inv_current_bool_1  size='15' >    
                                            <input type='hidden' name='unit' value=$unit_id >
                                            <input type='hidden' name='column' value=$column1 >
                                            <input type= 'submit' name= 'change_but' style=' margin-left: 25%; margin-top: 10%; font-size: 30px; text-align:center; background-color: $color_current_bool_1' value=$text_current_bool_1></form></td>";



                                            echo "<td><form action= update_values.php method= 'post'>
                                            <input type='hidden' name='value2' value=$current_bool_2   size='15' >  
                                            <input type='hidden' name='value' value=$inv_current_bool_2  size='15' >    
                                            <input type='hidden' name='unit' value=$unit_id >
                                            <input type='hidden' name='column' value=$column2 >
                                            <input type= 'submit' name= 'change_but' style=' margin-left: 25%; margin-top: 10%; font-size: 30px; text-align:center; background-color: $color_current_bool_2' value=$text_current_bool_2></form></td>";


                                            echo "<td><form action= update_values.php method= 'post'>
                                            <input type='hidden' name='value2' value=$current_bool_3   size='15' >  
                                            <input type='hidden' name='value' value=$inv_current_bool_3  size='15' >    
                                            <input type='hidden' name='unit' value=$unit_id >
                                            <input type='hidden' name='column' value=$column3 >
                                            <input type= 'submit' name= 'change_but' style=' margin-left: 25%; margin-top: 10%; font-size: 30px; text-align:center; background-color: $color_current_bool_3' value=$text_current_bool_3></form></td>";


                                            echo "<td><form action= update_values.php method= 'post'>
                                            <input type='hidden' name='value2' value=$current_bool_4   size='15' >  
                                            <input type='hidden' name='value' value=$inv_current_bool_4  size='15' >    
                                            <input type='hidden' name='unit' value=$unit_id >
                                            <input type='hidden' name='column' value=$column4 >
                                            <input type= 'submit' name= 'change_but' style=' margin-left: 25%; margin-top: 10%; font-size: 30px; text-align:center; background-color: $color_current_bool_4' value=$text_current_bool_4></form></td>";


                                            echo "<td><form action= update_values.php method= 'post'>
                                            <input type='hidden' name='value2' value=$current_bool_5   size='15' >  
                                            <input type='hidden' name='value' value=$inv_current_bool_5  size='15' >    
                                            <input type='hidden' name='unit' value=$unit_id >
                                            <input type='hidden' name='column' value=$column5 >
                                            <input type= 'submit' name= 'change_but' style=' margin-left: 25%; margin-top: 10%; font-size: 30px; text-align:center; background-color: $color_current_bool_5' value=$text_current_bool_5></form></td>";

                                            echo "</tr>
                                              </tbody>"; 

                                        }
                                        echo "</table>
                                        <br>
                                        ";  
                                        ?>

                                        </div>
                                        <p></p>

                                        <button class="btn btn-primary" data-bs-dismiss="modal">
                                            <i class="fas fa-xmark fa-fw"></i>
                                            Close Window
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Portfolio Modal 2-->
            <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" aria-labelledby="portfolioModal2" aria-hidden="true">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
                        <div class="modal-body text-center pb-5">
                            <div class="container">
                                <div class="row justify-content-center">
                                    <div class="col-lg-8">
                                        <!-- Portfolio Modal - Title-->
                                        <h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Control numérico</h2>
                                        <!-- Icon Divider-->
                                        <div class="divider-custom">
                                            <div class="divider-custom-line"></div>
                                            <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                                            <div class="divider-custom-line"></div>
                                        </div>
                                        <!-- Portfolio Modal - Image-->
                                        <img class="img-fluid rounded mb-5" src="assets/img/portfolio/cake.png" alt="..." />
                                        <!-- Portfolio Modal - Text-->
                                        <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>

                                        <div STYLE="overflow: auto;">

                                        <?php
                                        include("database_connect.php");

                                        if (mysqli_connect_errno()) {
                                          echo "Failed to connect to MySQL: " . mysqli_connect_error();
                                        }
                                        $result = mysqli_query($con,"SELECT * FROM ESPtable2");//table select

                                        echo "<table class='table' style='font-size: 30px;'>
                                            <thead>
                                                <tr>
                                                <th>Numeric controls</th>   
                                                </tr>
                                            </thead>

                                            <tbody>
                                              <tr class='active'>
                                                <td>CONTROL NUMBER 1</td>
                                                <td>CONTROL NUMBER 2</td>
                                                <td>CONTROL NUMBER 3</td>
                                                <td>CONTROL NUMBER 4 </td>
                                                <td>CONTROL NUMBER 5 </td>
                                              </tr>  
                                                ";

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

                                            echo "<tr class='success'>";

                                            $column6 = "RECEIVED_NUM1";
                                            $column7 = "RECEIVED_NUM2";
                                            $column8 = "RECEIVED_NUM3";
                                            $column9 = "RECEIVED_NUM4";
                                            $column10 = "RECEIVED_NUM5";

                                            $current_num_1 = $row['RECEIVED_NUM1'];
                                            $current_num_2 = $row['RECEIVED_NUM2'];
                                            $current_num_3 = $row['RECEIVED_NUM3'];
                                            $current_num_4 = $row['RECEIVED_NUM4'];
                                            $current_num_5 = $row['RECEIVED_NUM5']; 


                                            echo "<td><form action= update_values.php method= 'post'>
                                            <input type='text' name='value' style='width: 120px;' value=$current_num_1  size='15' >
                                            <input type='hidden' name='unit' style='width: 120px;' value=$unit_id >
                                            <input type='hidden' name='column' style='width: 120px;' value=$column6 >
                                            <input type= 'submit' name= 'change_but' style='width: 120px; text-align:center;' value='change'></form></td>";



                                            echo "<td><form action= update_values.php method= 'post'>
                                            <input type='text' name='value' style='width: 120px;' value=$current_num_2  size='15' >
                                            <input type='hidden' name='unit' style='width: 120px;' value=$unit_id >
                                            <input type='hidden' name='column' style='width: 120px;' value=$column7 >
                                            <input type= 'submit' name= 'change_but' style='text-align:center' value='change'></form></td>";

                                            echo "<td><form action= update_values.php method= 'post'>
                                            <input type='text' name='value' style='width: 120px;' value=$current_num_3  size='15' >
                                            <input type='hidden' name='unit' style='width: 120px;' value=$unit_id >
                                            <input type='hidden' name='column' style='width: 120px;' value=$column8 >
                                            <input type= 'submit' name= 'change_but' style='text-align:center' value='change'></form></td>";

                                            echo "<td><form action= update_values.php method= 'post'>
                                            <input type='text' name='value' style='width: 120px;' value=$current_num_4  size='15' >
                                            <input type='hidden' name='unit' style='width: 120px;' value=$unit_id >
                                            <input type='hidden' name='column' style='width: 120px;' value=$column9 >
                                            <input type= 'submit' name= 'change_but' style='text-align:center' value='change'></form></td>";

                                            echo "<td><form action= update_values.php method= 'post'>
                                            <input type='text' name='value' style='width: 120px;' value=$current_num_5  size='15' >
                                            <input type='hidden' name='unit' style='width: 120px;' value=$unit_id >
                                            <input type='hidden' name='column' style='width: 120px;' value=$column10 >
                                            <input type= 'submit' name= 'change_but' style='text-align:center' value='change'></form></td>";

                                            echo "</tr>
                                              </tbody>"; 

                                        }
                                        echo "</table>
                                        <br>
                                        ";      
                                        ?>

                                        </div>
                                        <p></p>

                                        <button class="btn btn-primary" data-bs-dismiss="modal">
                                            <i class="fas fa-xmark fa-fw"></i>
                                            Close Window
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Portfolio Modal 3-->
            <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" aria-labelledby="portfolioModal3" aria-hidden="true">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
                        <div class="modal-body text-center pb-5">
                            <div class="container">
                                <div class="row justify-content-center">
                                    <div class="col-lg-8">
                                        <!-- Portfolio Modal - Title-->
                                        <h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Enviar texto</h2>
                                        <!-- Icon Divider-->
                                        <div class="divider-custom">
                                            <div class="divider-custom-line"></div>
                                            <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                                            <div class="divider-custom-line"></div>
                                        </div>
                                        <!-- Portfolio Modal - Image-->
                                        <img class="img-fluid rounded mb-5" src="assets/img/portfolio/circus.png" alt="..." />
                                        <!-- Portfolio Modal - Text-->
                                        <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>


                                        <?php

                                        include("database_connect.php");

                                        if (mysqli_connect_errno()) {
                                          echo "Failed to connect to MySQL: " . mysqli_connect_error();
                                        }
                                        $result = mysqli_query($con,"SELECT * FROM ESPtable2");//table select



                                           echo "<table class='table' style='font-size: 30px;'>
                                            <thead>
                                                <tr>
                                                <th>Send Text to Noobix</th>    
                                                </tr>
                                            </thead>

                                            <tbody>
                                              <tr class='active'>
                                                <td>Text</td>        
                                              </tr>  
                                                ";

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

                                             echo "<tr class='success'>";   

                                            $column11 = "TEXT_1"; 
                                            $current_text_1 = $row['TEXT_1'];


                                            echo "<td><form action= update_values.php method= 'post'>
                                            <input style='width: 100%;' type='text' name='value' value=$current_text_1  size='100'>
                                            <input type='hidden' name='unit' value=$unit_id >
                                            <input type='hidden' name='column' value=$column11 >
                                            <p></p>
                                            <input type= 'submit' name= 'change_but' style='text-align:center' value='Send'></form></td>";

                                            echo "</tr>
                                              </tbody>";      

                                        }
                                        echo "</table>
                                        <br>
                                        <br>
                                        <hr>";

                                        ?>

                                        <button class="btn btn-primary" data-bs-dismiss="modal">
                                            <i class="fas fa-xmark fa-fw"></i>
                                            Close Window
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Portfolio Modal 4-->
            <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" aria-labelledby="portfolioModal4" aria-hidden="true">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
                        <div class="modal-body text-center pb-5">
                            <div class="container">
                                <div class="row justify-content-center">
                                    <div class="col-lg-8">
                                        <!-- Portfolio Modal - Title-->
                                        <h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Indicador ON/OFF</h2>
                                        <!-- Icon Divider-->
                                        <div class="divider-custom">
                                            <div class="divider-custom-line"></div>
                                            <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                                            <div class="divider-custom-line"></div>
                                        </div>
                                        <!-- Portfolio Modal - Image-->
                                        <img class="img-fluid rounded mb-5" src="assets/img/portfolio/game.png" alt="..." />
                                        <!-- Portfolio Modal - Text-->
                                        <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>

                                        <div STYLE="overflow: auto;">

                                        <?php
                                        include("database_connect.php");

                                        if (mysqli_connect_errno()) {
                                          echo "Failed to connect to MySQL: " . mysqli_connect_error();
                                        }

                                        $result = mysqli_query($con,"SELECT * FROM ESPtable2");//table select

                                        echo "<table class='table' style='font-size: 30px;'>
                                            <thead>
                                                <tr>
                                                <th>Boolean Indicators</th> 
                                                </tr>
                                            </thead>

                                            <tbody>
                                              <tr class='active'>
                                                <td>Noobix ID</td>
                                                <td>Indicator 1</td>
                                                <td>Indicator 2 </td>
                                                <td>Indicator 3 </td>
                                              </tr>  
                                                ";



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

                                            $cur_sent_bool_1 = $row['SENT_BOOL_1'];
                                            $cur_sent_bool_2 = $row['SENT_BOOL_2'];
                                            $cur_sent_bool_3 = $row['SENT_BOOL_3'];


                                            if($cur_sent_bool_1 == 1){
                                            $label_sent_bool_1 = "label-success";
                                            $text_sent_bool_1 = "Active";
                                            }
                                            else{
                                            $label_sent_bool_1 = "label-danger";
                                            $text_sent_bool_1 = "Inactive";
                                            }


                                            if($cur_sent_bool_2 == 1){
                                            $label_sent_bool_2 = "label-success";
                                            $text_sent_bool_2 = "Active";
                                            }
                                            else{
                                            $label_sent_bool_2 = "label-danger";
                                            $text_sent_bool_2 = "Inactive";
                                            }


                                            if($cur_sent_bool_3 == 1){
                                            $label_sent_bool_3 = "label-success";
                                            $text_sent_bool_3 = "Active";
                                            }
                                            else{
                                            $label_sent_bool_3 = "label-danger";
                                            $text_sent_bool_3 = "Inactive";
                                            }


                                              echo "<tr class='info'>";
                                              $unit_id = $row['id'];
                                                echo "<td>" . $row['id'] . "</td>"; 
                                                echo "<td>
                                                <span class='label $label_sent_bool_1'>"
                                                    . $text_sent_bool_1 . "</td>
                                                </span>";

                                                echo "<td>
                                                <span class='label $label_sent_bool_2'>"
                                                    . $text_sent_bool_2 . "</td>
                                                </span>";

                                                echo "<td>
                                                <span class='label $label_sent_bool_3'>"
                                                    . $text_sent_bool_3 . "</td>
                                                </span>";
                                              echo "</tr>
                                              </tbody>"; 



                                        }
                                        echo "</table>";
                                        ?>

                                        </div>
                                        <p></p>

                                        <button class="btn btn-primary" data-bs-dismiss="modal">
                                            <i class="fas fa-xmark fa-fw"></i>
                                            Close Window
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Portfolio Modal 5-->
            <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" aria-labelledby="portfolioModal5" aria-hidden="true">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
                        <div class="modal-body text-center pb-5">
                            <div class="container">
                                <div class="row justify-content-center">
                                    <div class="col-lg-8">
                                        <!-- Portfolio Modal - Title-->
                                        <h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Indicador numérico</h2>
                                        <!-- Icon Divider-->
                                        <div class="divider-custom">
                                            <div class="divider-custom-line"></div>
                                            <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                                            <div class="divider-custom-line"></div>
                                        </div>
                                        <!-- Portfolio Modal - Image-->
                                        <img class="img-fluid rounded mb-5" src="assets/img/portfolio/safe.png" alt="..." />
                                        <!-- Portfolio Modal - Text-->
                                        <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>


                                        <div STYLE="overflow: auto;">


                                        <?php

                                        include("database_connect.php");

                                        if (mysqli_connect_errno()) {
                                          echo "Failed to connect to MySQL: " . mysqli_connect_error();
                                        }

                                        $result = mysqli_query($con,"SELECT * FROM ESPtable2");//table select


                                        echo "<table class='table' style='font-size: 30px;'>
                                            <thead>
                                                <tr>
                                                <th>Integer Indicators</th> 
                                                </tr>
                                            </thead>

                                            <tbody>
                                              <tr class='active'>
                                                <td>Received number 1</td>
                                                <td>Received number 2</td>
                                                <td>Received number 3 </td>
                                                <td>Received number 4 </td>
                                              </tr>  
                                                ";





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


                                            echo "<tr class='info'>";

                                            echo "<td>" . $row['SENT_NUMBER_1'] . "</td>";
                                            echo "<td>" . $row['SENT_NUMBER_2'] . "</td>";
                                            echo "<td>" . $row['SENT_NUMBER_3'] . "</td>";
                                            echo "<td>" . $row['SENT_NUMBER_4'] . "</td>";

                                            echo "</tr>
                                            </tbody>"; 


                                        }
                                        echo "</table>
                                        <br>
                                        ";
                                        ?>

                                        </div>
                                        <p></p>

                                        <button class="btn btn-primary" data-bs-dismiss="modal">
                                            <i class="fas fa-xmark fa-fw"></i>
                                            Close Window
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Portfolio Modal 6-->
            <div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" aria-labelledby="portfolioModal6" aria-hidden="true">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
                        <div class="modal-body text-center pb-5">
                            <div class="container">
                                <div class="row justify-content-center">
                                    <div class="col-lg-8">
                                        <!-- Portfolio Modal - Title-->
                                        <h2 class="portfolio-modal-title text-secondary text-uppercase mb-0">Submarine</h2>
                                        <!-- Icon Divider-->
                                        <div class="divider-custom">
                                            <div class="divider-custom-line"></div>
                                            <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                                            <div class="divider-custom-line"></div>
                                        </div>
                                        <!-- Portfolio Modal - Image-->
                                        <img class="img-fluid rounded mb-5" src="assets/img/portfolio/submarine.png" alt="..." />
                                        <!-- Portfolio Modal - Text-->
                                        <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia neque assumenda ipsam nihil, molestias magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod consequuntur itaque. Nam.</p>
                                        <button class="btn btn-primary" data-bs-dismiss="modal">
                                            <i class="fas fa-xmark fa-fw"></i>
                                            Close Window
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Bootstrap core JS-->
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
            <!-- Core theme JS-->
            <script src="js/scripts.js"></script>
            <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
            <!-- * *                               SB Forms JS                               * *-->
            <!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
            <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
            <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
        </body>
    </html>

I've been using OpenAI's ChatGPT a lot more. It's over at https://chat.openai.com/chat
Try this question and see what you think "How to refresh data without refreshing the entire page using jquery and php?"

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.