html code when updated by jquery has some issues - php

Question

Well, I am developing a web page to view images in a grid image gallery. The images are categorized, and there's a left pane to select which category to view. Also, one of the links in the left pane is "My categories" which views all the categories as folder images in the grid.
I have a jquery script to change the images in the gallery when one of the categories is clicked, also when "My categories" is clicked it changes the images to images of folders for all the categories i have. Till now everything works fine.
The problem is that when I have "My categories" selected and the gallery is containing images of folders for all the categories I have, now I want to use the same jquery script so that when i click one of the "images of folders" which refer to one of the categories, the images in that category are viewed, but it's not working!
code for adding categories to left pane:
<ul class="nav nav-sidebar">
<li class="active"><b>Your Folders</b><span class="sr-only">(current)</span></li>
<?php
$db = mysql_connect("localhost", "root","");
$er = mysql_select_db("images", $db);
$sql="SELECT * FROM folder";
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{
echo "<li><a class='folder' value='$row[folder_id]' title='$row[folder_name]' href='#'>&nbsp&nbsp&nbsp$row[folder_name]</a></li>";
}
?>
</ul>
html which adds images in gallery:
<div class="row" id="txtHint">
</div>
JQuery script to detect when "My categories" is selected:
$(".folders").click(function() {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET","getFolders.php?",true);
xmlhttp.send();
});
php code accessed by jquery:
<?php
$db = mysql_connect("localhost", "root","");
$er = mysql_select_db("images", $db);
$sql="SELECT * FROM folder";
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{
echo "<div class='col-lg-3 col-sm-4 col-xs-6'><a title='$row[folder_name]' class='folder' value='$row[folder_id]' href='#'><img class='thumbnail img-responsive' src='folder.png'></a></div>";
}
?>
jquery which detects when one of the categories is selected:
$(document).ready(function() {
$(".folder").click(function() {
var $value = $(this).attr("value");
document.getElementById("title").innerHTML = $(this).attr("title");
if ($value == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","getImages.php?q="+$value,true);
xmlhttp.send();
}
});
php accessed by the jquery
<?php
$q = intval($_GET["q"]);
$db = mysql_connect("localhost", "root","");
$er = mysql_select_db("images", $db);
$sql="SELECT image_url, image_name FROM image WHERE folder_id=$q";
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{
echo "<div class='col-lg-3 col-sm-4 col-xs-6'><a title='$row[image_name]' href='#'><img class='thumbnail img-responsive' src='$row[image_url]'";
}