How can I make a universal clickcounter?

Question

I have a gif on my webpage that only loops once, and I've set it so that it reloads every time I click it (using an onclick effect). I've given this onclick effect a 800ms cooldown, which is the duration of the gif, so that you can't reload the gif until it's finnished. I've also added a clickcounter effect to this gif, so that it ads +1 to the counter every time it's clicked. For the purpose of accuracy and quality, I've also given the clickcounter effect a 800ms cooldown, which means that you can't add more than (+1) every 0,8 second. I've used the following script:

Javascript

<script>
$(function(){
    var update_count = function () {
        $('#count-block').html("<h3><b>The rabbit has jumped " + image.click_count + " meters.</b></h3>");
    }
    var image = new Image();
    image.in_action = false;
    image.duration = 800;
    image.click_count = 0;
    update_count();
    image.src ='transparent.gif';
    $('#img').click(function(){
        if (!image.in_action) {
           image.in_action = true;
           image.click_count += 1;
           update_count();
           $(this).attr('src',image.src);
            window.setTimeout(function() {
                image.in_action = false;
            }, image.duration);

        }
    });
});
</script>

This works great, as you can see from this link to my webpage, but I would like to make the clickcounter effect universal. What I mean by this is that I would like for the clicks to be saved in a folder (probably in my mainfolder on my database), so that every click is accounted to eachother, meaning that clicks will stack up. For instance, If I click the button 10 times, and someone else (on a completly different computer/network/area) click the button 12 times, the total amount of clicks would be 22, and so forth.

You can find a JSFiddle link to my webpage here

I am fairly new to scripting and HTML etc, so rough explanaitons would be needed. I have not yet tried out style sheets or anything involving a third party element/folder etc (which I believe this project requires), so I'd apprechiate if you could talk me through the process.

I will go further into details and elaborate my preferences if needed! Feel free to use the JSFiddle link and check out the webpage in it's current state

Thanks to all in advance!

(btw, for what It's worth, my database runs PHP)

Answer 1

Here's my suggestion, and I haven't tested it, so I'm not 100% sure it works, but create a hidden input field using jQuery(I'm assuming that's the library you're using based on the first function).

$("#img").append("<input type='hidden' name='counter' id='counter' value='" +image.click_count +"' />

Then in PHP, post the value of the input field. Then insert that value into your database, so, for instance.

PHP

    $counter = $_POST["counter"];
    **INSERTING THE CLICK COUNTS**
    mysqli_query($dbconnection, "INSERT INTO 'clicks'(`clicks`) VALUES('" .$counter ."');

$query = mysqli_query($dbconnection, "SELECT SUM(clicks) AS 'Clicks' FROM 'clicks');
while($row = mysqli_fetch_assoc($query){
    $clickNumber = "{$row['clicks']}";
}

Of course, this is just a 'rough draft' and you'll have to alter it to suit your needs, but it should get you started. You'll also have to replace your table and field names with what's in your database, but this is the general idea.