SQL updates the table twice but should only update once - php

Question

This is weirding me out quite a bit...
If i delete the update statement it dont update the "views" at all... which makes sence.
If i delete the "Delete html" and run the file it will update once and not twice as it should? which does not make sense at all
How is this even possible, especially when there only are one update query and when it is plain HTML that needs to be deleted?
If anyone is interested i am prepared to do teamviewer if you do not belive me.
This is the sample page
All of the code seperated in blocks for readability
$stmt = $dbCon->prepare("SELECT id, views, rating, votes FROM rating ORDER BY id DESC LIMIT 1");
$stmt->execute();
$stmt->bind_result($id, $views, $rating, $votes);
$stmt->fetch();
$stmt->close();
$average = averageRate($rating, $votes);
$string1;
$string1 .= "<p>Id = " . $id . "</p><br>";
$string1 .= "<p>Views = " . $views . "</p><br>";
$string1 .= "<p>Rating = " . $rating . "</p><br>";
$string1 .= "<p>Votes = " . $votes . "</p><br>";
$string1 .= "<p>Average = " . averageRate($rating, $votes) . "</p><br><br>";
The update query
//THIS IS THE UPDATE QUERY PROBLEM
//UPDATERE DATABASED
$stmt = $dbCon->prepare("UPDATE rating SET
views = views + 1 WHERE id = ?");
$stmt->bind_param('i', $id);
$stmt->execute();
$stmt->close();
Delete HTML (If i delete this HTML the SQL updates once, weird right? the JS is whats used with that HTML)
<div class="topNav">
<span class="topNavArrow">
</span>
<div class="categoryWrapper">
<div id="categoryParent">
<input id="category01" class="categorys" type="checkbox" value="1" checked>
<input id="category02" class="categorys" type="checkbox" value="2" checked>
<input id="category03" class="categorys" type="checkbox" value="3" checked>
</div>
<label for="category01">
<img src="#" alt="category 01">
</label>
<label for="category02">
<img src="#" alt="category 02">
</label>
<label for="category03">
<img src="#" alt="category 03">
</label>
</div>
</div>
<script>
document.querySelector("#categoryParent").addEventListener("click", checkedCategory, false);
var categorys = document.getElementsByClassName("categorys");
var categorysLength = categorys.length;
var checked = "1,2,3";
function checkedCategory(e) {
checked = "";
for (var c = 0; c < categorysLength; c++) {
if (checked) {
var separator = ",";
} else {
var separator = "";
}
if (categorys[c].checked) {
checked += separator + categorys[c].value;
}
}
alert(checked);
e.stopPropagation();
}
</script>
The rest of the HTML
<div id="contentWrapper" class="contentWrapper">
<?php echo $string1;?>
<div class="contentInner">
<div class="contentHelper">
<div class="contentInfo">
<p id="contentViews">Views: <?php echo $views; ?></p>
<p>Votes: <?php echo $votes; ?> </p>
<p>Average: <?php echo $average; ?>/5</p>
<p class="<?php echo $voteYesNo; ?>"><?php echo $voteText ?></p>
</div>
<div class="contentImg">
</div>
</div>
</div>
</div>
Searched STO but i could not find any questions that covered my problem but some similair like this link
And no this is not a bad joke it is really whats going on...