How to post SQL values into checkboxes - json

Question

First of all, my question might be a duplicate question to this one: Need html checkbox to be checked by mysql result but I do not understand the answer - the op didn't post any code and I don't see how to fit the suggested code into my case because I need to get the values from SQL (?).
Here all the data:
I have an HTML form with checkboxes, which stores the values as for checked as "1" and unchecked as "0" into an SQL database on submit of the form. Now I want to make it so that it (on page load) pulls data from database and populates the form's checkboxes when the same user comes back to the page. (I know my code is faulty in some places, I still need to resolve quite some things on this project) for right now, what I want to solve is to get the SQL to output the result to existing HTML checkboxes (not create new checkboxes or new HTML form).
Note: my HTML form and my php form are in two separate files and they cannot be merged (I don't know if that makes a difference).
All checkboxes in the form are empty by default. I am using Ajax in my form so that on pageload the userid is passed to a php file which then runs the SQL Query to pull up "1" if the checkbox should be checked and "0" if it should be left unchecked.
Here the piece of HTML which is relevant to the case:
<input type=text id="userid" name="userid" value="">
</div>
<div class="grid">
<div>
<div class="grid-item">
<img src="image.png" alt="">
</div>
<div class="grid-item-title">
<h2>Title</h2>
</div>
<div class="grid-item">
<p>
<input type="hidden" name="owns[item1]" value="0"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value">I own this<br>
</p>
</div>
</div>
<div>
<div class="grid-item">
<img src="image.png" alt="">
</div>
<div class="grid-item-title">
<h2>Title 2</h2>
</div>
<div class="grid-item">
<p>
<input type="hidden" name="owns[item2]" value="0"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value">I own this<br>
</p>
</div>
</div>
This is the Ajax code I am using:
document.addEventListener("DOMContentLoaded", function myFunction() {
var x = 3 //replace with user ID
$.ajax({
url: 'libraryRequest.php',
method: "post",
data: {"userid": x }, // sends id to PHP
dataType: "html",
async: false,
success: function(data){
$('#content').html(data); // currently this overwrites all HTML on the page...
},
error: function (xhr, ajaxOptions, thrownError) {
var errorMsg = 'Ajax request failed: ' + xhr.responseText;
$('#content').html(errorMsg); // currently this overwrites all HTML on the page...
}
})
});
And this is the PHP code I managed to put together sofar:
$userid = 0;
$userid = $_POST['userid'];
if ($userid != 0) { //only execute if there is a user id
$userquery = "SELECT * FROM libraryG WHERE userid =$userid"; //find if userid exists
$result = mysqli_query($con, $userquery);
if(mysqli_num_rows($result)>0) { //if user id exists run this code to pull the data
$sqlupdate = "SELECT * FROM libraryG WHERE userid = $userid";
mysqli_query($con, $sqlupdate);
if ($result->num_rows > 0) {
while($row = $result->fetch_row()) {
print json_encode($row); // edited
}
} //if user id doesn't exist in db or there is no user id - do nothing
}
Each checkbox value is stored in a separate column in SQL.
I have been on this for hours now but in most cases the similar questions I found are explaining solutions for C# or ASP which I have never used and being kinda new in everything I try to avoid those things I don't know anything about if there is a way to do it otherwise.