Problem reading molecular formula from database using jquery ajax PHP

See more:

CSS

HTML

PHP

Ajax

MySQL

jQuery

I have few thousand chemical products in database. I need to update them dynamically in the website with 15 per page along with pagination. I am using below code for getting the data from DB. Its working fine in Localhost but when uploaded in server the molecular formula does not render properly.
Ex:

C??H??N?NAO?

<?php

/*** mysql hostname ***/
$hostname = 'localhost';

/*** mysql username ***/
$username = 'admin_bio';

/*** mysql password ***/
$password = 'bio_organics';

$page_number = $_GET['pageNumber'];

$start = $page_number * 15;

$products_per_page = 15;

$dbname = 'bio_organics';

$dbh = new PDO("mysql:host=$hostname;dbname=$dbname", $username, $password);

$response = $dbh->query("SELECT * FROM products LIMIT $start,$products_per_page ")->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($response);

$dbh = null;

?>

What I have tried:

I tried to render the above json data in Webpage with jQuery ajax.

<script>
jQuery(document).ready(function()
{
var pageNumber = window.location.href.split("=")[1];
if(pageNumber==undefined)
{
pageNumber = 0;
}
else
{
pageNumber = pageNumber - 1;
}
jQuery.ajax(
{
type:"GET",
dataType:"JSON",
url:"products_list.php?pageNumber="+pageNumber,
success:function(data)
{
var product_listing = '';
for(i=0;i<jquery(data).length;i++)>
{
var pageNumbers = '<option value="'+ data[i].id +'">'+ data[i].id +'</option>'
if(product_listing=='')
{
product_listing = '';
}
else
{
product_listing = product_listing + '';
}
}

jQuery("#all_products").html(product_listing);
}
});
});
</script>