Display specifics columns of each rows in html - php

Question

I have been working on a job-listing website during the last few weeks as a self taught CS student. I finished the front end of the website in July and now I am learning mySQL and PHP to produce the back-end.
So, on the current "job listing" page search.html, there is currently 4 listing in the page but I typed those directly on the html when I was making the front-end just to see how it will look like.
I have build my database like this and added few examples:
I also made a back-end page to let the user add a a new listing and it is working.
I am not sure it was a good idea to start with the front-end. I am now trying to display three columns (title, location, type) of eachrowbased on my specific front-end layout. I won't display thedate` yet since I have not created it on mySQL.
search.html
<div class="job-listing">
<div class="container">
<div class="job-number">
<h2>We Found <span id="number-jobs-total" class="text-secondary"></span> Offers For <span>You</span> </h2>
</div>
<ul class="job-board">
<li class="job job-1">
<div class="job-title">
<h2>Process Engineer</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Full-Time</p>
</div>
<div class="job-date">
<p>Published on 07/19/2019</p>
</div>
<div class="job-industry">
<p>Engineering</p>
</div>
<ul class="job-keywords">
<li>Engineering</li>
<li>Science</li>
</ul>
</li>
<li class="job job-2">
<div class="job-title">
<h2>Chief Financial Officier</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Full-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
<li class="job job-3">
<div class="job-title">
<h2>Assistant CEO</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Part-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
<li class="job job-4">
<div class="job-title">
<h2>Front-End Developer</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Part-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
</ul>
<nav class="pagination-container">
<ul class="pagination">
<li>Previous</li>
<li>Next</li>
</ul>
</nav>
</div>
</div>
Things I will do later:
I need to protect my PHP code against injections
The pagination button is not working