Dumping PHP echo in jQuery - php

Question

I'm loading images (pinpoints) onto a map and if you click on them they load a video URL in a DB. When I load the images using PHP I name their IDs the corresponding index in the MySQL so I can talk to them when I click on the images and attach an action to it, to load the correct video URL.
For some reason the PHP breaks the code.
<div id="satmap-div">
<div>
<?php
$sql = "SELECT * FROM btring_content";
$n = 1;
$result = $objCon->query($sql) or die('error in query:' . mysqli_error($objCon));
while($row = mysqli_fetch_assoc($result)) {
echo "<img id=" . $row['id'] . " class='pinpoint' src='img/pp.png'/>";
?>
<script>
$( "#satmap-div .pinpoint:nth-child(" + ( <?php echo (string)$n?> ) + ")" ).css( { "left": <?php echo (string)$row['leftPos']?>, "top": <?php echo (string)$row['topPos']?> } );
</script>
<?php
$n++;
}
?>
</div>
<img id="satmap" src="img/bigmap.gif"/>
</div>
$('#satmap-div > div').children('img').click(function() {
var index = $(this).attr('id');
<?php
$sql2 = "SELECT * FROM `btring_content` WHERE `id`=18";
$result2 = $objCon->query($sql2) or die('error in query:' . mysqli_error($objCon));
$row2 = mysqli_fetch_array($result2);
?>
$( "p" ).text( <?php echo (string)$row2['link']?> );
});

Answer 1

Change :
$( "p" ).text( <?php echo (string)$row2['link']?> );
to
$( "p" ).text( "<?php echo (string)$row2['link']?>" );
When displaying strings using the .text() function always qoute.

Answer 2

You are using the following line in your code:
echo "<img id=" . $row['id'] . " class='pinpoint' src='img/pp.png'/>";
This actually means your code will render as following:
<img id=3 class='pinpoint' src='img/pp.png'/>
As you can see, you are missing the quotes around id. Try using the following code instead:
echo "<img id='" . $row['id'] . "' class='pinpoint' src='img/pp.png'/>";
Further, your <script> is also missing ; in the PHP echo statements:
<script>
$( "#satmap-div .pinpoint:nth-child(" + ( <?php echo (string)$n?> ) + ")" ).css( { "left": <?php echo (string)$row['leftPos']?>, "top": <?php echo (string)$row['topPos']?> } );
</script>
Change it to:
<script>
$( "#satmap-div .pinpoint:nth-child(" + ( <?php echo (string)$n?> ) + ")" ).css( { "left": <?php echo (string)$row['leftPos']; ?>, "top": <?php echo (string)$row['topPos']; ?> } );
</script>