How to update div using print and image functions in php every few seconds

Question

I am trying to create a card game in a browser with mainly PHP and, possibly, some other useful languages ​​that I laid out for testing and expanding my knowledge of PHP with what I always wanted to do. But every online solution that I read and tried to implement will not work, and I don’t know why. I have a logic:

//find game form
        print "<form method='post' action='game.php'>
        <label>Enter host generated game #</label><br>
        <label><input type='text' name='gamenumber'></label><br>
        <label><input type='submit' name='findgame' value='FindGame'></label><br><br>
        </form>";

        //host game button
        print "<form method='post' action='game.php'>
        <label><input type='submit' name='hostgame' value='HostGame'></label>
        </form>";

//game logic



if(isset($_POST['hostgame'])) 
    {
        $roomnumber = rand();
        print $roomnumber;

        insertField($Ausername,$roomnumber); //insert field GUI

        //link game to host for future field printing
        $query = "UPDATE game".$roomnumber." SET host='".$Ausername."' WHERE host='null'";
        $result = mysqli_query($link, $query);

        print "<div id='quote'>"; //populate host just disappears <meta http-equiv='refresh' content='5' />

        //populates self and opponents in hosts perspsective
        populatehost($roomnumber); 

        print "</div>";


    }

    if(isset($_POST['findgame'])) //this processes after user submits data.
    {
        $roomnumber = $_POST['gamenumber'];
        $_SESSION['gamenumber'] = $_POST['gamenumber'];

        //link game to find for future field printing
        $query = "UPDATE game".$roomnumber." SET find='".$Ausername."'WHERE find='null'";
        $result = mysqli_query($link, $query);

        print "<form method='post' action='game.php'>
        <label><input type='submit' name='startgame' value='StartGame'></label>
        </form>";

        //populates self and opponents in finds perspsective
        populatefind($roomnumber); 

    }


    if(isset($_POST['startgame'])) //this processes after user submits data.
    {
        print "<br>Game started.<br>";

        print "heads or tails?\n\n";

        print "<form method='post' action='game.php'>
        <label><input type='text' name='headstails'></label><br>
        <label><input type='submit' name='select' value='Select'></label><br><br>
        </form>";

        //finder always starts game
        populatefind($_SESSION['gamenumber']);
    }

    $gameStatus="";
    $flip = rand(1,2);
    $coin = "heads";
    $gameStarted = "game not started";

    if($flip==1)
        $coin="heads";
    else if($flip==2)
        $coin="tails";

    if(isset($_POST['headstails'])) //this processes after user submits data.
    {
        if($_POST['headstails']==$coin)
        {
            print "find game player goes first";
            $gameStarted = "game started";
            //notify find game player he goes first
            //do logic where he goes first
        }
        else
        {
            print "host game player goes first";
            $gameStarted = "game started";
            //notify host game player he goes first
            //do logic where he goes first
        }

        populatefind($_SESSION['gamenumber']);
    }

this is the jquery function i tried that i inserted at the bottom of the page.

?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js%22%3E%3C/script%3E">
    jQuery(function () {
        var $els = $('div[id^=quote]'),
            i = 0,
            len = $els.length;

        $els.slice(1).hide();
        setInterval(function () {
            $els.eq(i).fadeOut(function () {
                i = (i + 1) % len
                $els.eq(i).fadeIn();
            })
        }, 2500)
    })
</script>

</body>
</html>

, , , , , .. , . , div , , , , . php , jquery, . btw find - .

Answer 1

, , , Ajax.

:

:

1 Javascript, : ", , ". , " " " ". 2.

10 , 20 , 20 20 " ". , . , 1000 !

Socket. 1 2 , . 1 , 2 " ".

1000 , . , . .

: 1 2 . 1 , . : " , , ", . .

, Javascript: , .

: . PHP, Java, Node ..

GitHub WebSocket Php:

, , Socket

Answer 2

:

setInterval(function refresh(){
  var value = Math.round(Math.random()*100);
  $("#target").addClass("hidden");
  $("#target").html(value);
  $("#target").removeClass("hidden");
}
, 1500);

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">
</div>

Hide result