JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/productlisting.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

    <script src="lib/jquery-1.11.2.min.js"></script>
    <script src="lib/jquery.mobile-1.4.5.min.js"></script>
    <script src="lib/jquery.validate.js"></script>

    <title>Product Listing</title>
</head>
<body>
    <div class="container">
        <!--This is a Division that put everything inside on one row-->
        <div class="row">
            <!--This is a Division with class that sets the content color and spacing-->
            <div class="col-2 whitecolor">
                <!--This is a title-->

                <h1>Product List</h1>
            </div>
            <!--This is a div for a search bar (FORM)-->
            <div data-role="content" class="ui-content " id="SearchSection">
                <form class="search-bar" id="product-search-form">
                    <input type="text" name="pname" class="form-control" placeholder="Enter keywords">
                    <input type="hidden" name="product_search" value="1">
                </form>
            </div>
            <!--This is a div for a Search Product Button(FORM)-->
            
                <button  class="btn...

JavaScript

//Press Show all to see products

$(document).ready(function () {

    //Activiating this fuction;
    getProduct();

    //Creating a function that get product basic details from the database
    function getProduct() {
        var url = "https://bitmp08.projectsbit.org/MobileApp/getproducts.php";
        // this  the start of a ajax function (a fuction use to call to php for database query)
        $.ajax({
            // 1. set the destination for this package of content
            url: url,
            //2. the ways use to sent the package
            method: 'POST',
            //3. Give the package a name for the PHP side to open the correct package
            data: { GET_PRODUCT: 5},
            //4. Break open the response received 
            success: function (response) {
                console.log(response);
                var resp = jQuery.parseJSON(JSON.stringify(response));

          

                var responselength = resp.message.length;
  

                if (resp.status == 1) {
                    //creating a variable to store the final display conetent          
                    var ProductContent = '';
                    // creating two varible for the limit of items looped out each row in the page.
                   // var tableitemcount = 0;
                   // var tableitemlimit = 7;


                    

                        
                        //Looping the products out
                        $.each(resp.message, function (index, value) {

                            
                                ProductContent +=
                                   
                                    '<div class="col-xs-6">' +
                                    '<div class="panel panel-info">' +
                                    '<div class="panel-heading">' + value.product_name + '</div>' +
                                    '<div class="panel-body">' +
                                    '<img...