เกี่ยวกับ jquery มันไม่ทำงาน ไม่ค่อยเข้าใจหลักการเท่าไหร่ครับ

<script type="text/javascript"><!--
var course_row = <?php echo $i; ?>;

function addCourse() {
	html  = '	<table width="500" border="0" align="center" cellpadding="0" cellspacing="0" id="course-row' + course_row + '">';
	html += '	  <tr>';
	html += '		<td class="left" width="350" style="background-image:url(image/bg_title2.png); background-repeat: repeat-x; color: #02575C; border-right: 3px solid #02575C;"><strong>Select course&nbsp;' + course_row + '</strong></td>';
	html += '		<td class="left" width="150" style="background-image:url(image/bg_title2.png); background-repeat: repeat-x; color: #02575C;"><strong>Price</strong></td>';
	html += '	  </tr>';
		  <?php $results_course = $db->select("SELECT * FROM course"); ?>
		  <?php foreach ($results_course as $result_course) { ?>
		  <?php $split = explode("+", $result_course['name']); ?>
	html += '	  <tr>';
	html += '		<td class="left" style="border-bottom: 1px dotted #F1A701;">';
	<?php
            for ($n=0; $n<count($split); $n++) {
	?>
    html += '       	<strong><?php echo $split[$n]; ?></strong><br />';
	<?php
            }
	?>
	html += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :&nbsp;Free Room &nbsp; <?php echo $result_course['day']; ?>&nbsp;Night&nbsp;&nbsp;<a href="#" rel="detail_course.php?id=<?php echo $result_course['course_id']; ?>" style="font-size: 10px; color: #CC6600;">(Detail)</a></td>';
	html += '		<td class="left" style="border-bottom: 1px dotted #F1A701;"><input type="radio" name="course_select' + course_row + '" value="<?php echo $result_course['course_id']; ?>-<?php echo $result_course['price']; ?>" />&nbsp; <?php echo number_format($result_course['price']); ?> Bht.</td>';
	html += '	  </tr>';
		  <?php } ?>
	html += '	</table>';
    html += '    <br />';
    html += '    <br />';
	html += '	 <input type="hidden" name="countcourse[]" value="' + course_row + '" />';
	
	$('#before').before(html);
	
	course_row++;
}
//--></script> 

<script type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function() 
{
   // Use the each() method to gain access to each elements attributes
   $('a[rel]').each(function()
   {
      $(this).qtip(
      {
         content: {
            // Set the text to an image HTML string with the correct src URL to the loading image you want to use
            text: '<img class="throbber" src="image/throbber.gif" alt="Loading..." />',
            url: $(this).attr('rel'), // Use the rel attribute of each element for the url to load
            title: {
               button: 'Close' // Show a close link in the title
            }
         },
         position: {
            corner: {
               target: 'bottomMiddle', // Position the tooltip above the link
               tooltip: 'topLeft'
            },
            adjust: {
               screen: true // Keep the tooltip on-screen at all times
            }
         },
         show: { 
            solo: true // Only show one tooltip at a time
         },
         style: {
            tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
               radius: 2,
			   color: '#CC6600'
            },
			background: '#054a4f',
            name: 'light', // Use the default light style
            width: 450 // Set the tooltip width
         }
      })
   });
});
</script>