为什么这个php变量不会进入html的id？

I'm a highschool student who is not that great at coding, so forgive me if I sound dumb for this or have missed something obvious. So I have div ids that play audio clips when I click on pictures. They go from div5 to div14. When I type in 'div5' directly after 'id =' then it plays my audio. However, I'm trying to make this id change in increments of one (div5,div6,div7 etc). So I tried that loop. I found out that the html wont take the php variable $string, as when I tried it, the picture on my website didn't play audio. The $i doesn't do anything atm. If anyone could help, I would greatly appreciate it.

<?php
$i=5;
while ($row= mysqli_fetch_assoc($result)) {
$string="drag5";

echo '<div style= "width: 100px;  height: 100px;  margin: 10px;border: 3px 
solid #FFFFFF; box-shadow: 10px 10px 5px #888888; float: left" 
class="boxes"><img height="100px" width="100px" id="<?php echo $string; ?>" 
class="dragg" src="data:image/jpeg;base64,'.base64_encode( $row['source'] 
).'"/></div>';
$i++;
}
?>

There are a bunch of issues with your sample code, which is probably why you're having a hard time finding the immediate culprit. Here's an approach that, while still pretty far from perfect, might be a bit clearer:

<style>
    .boxes {
        width: 100px;
        height: 100px;
        margin: 10px;
        border: 3px solid #FFFFFF;
        box-shadow: 10px 10px 5px #888888;
        float: left;
    }
    .boxes > img {
        height: 100px;
        width: 100px;
    }
</style>
<?php

$i = 5;

while ($row= mysqli_fetch_assoc($result)) {
    printf('
        <div class="boxes">
            <img id="string%s" class="dragg" src="data:image/jpeg;base64,%s"/>
        </div>',
        $i,
        base64_encode($row['source'])
    );
    $i++;
}
?>

I pulled all the styling out of the php (you should do the same, but should probably put it into a separate stylesheet). I also opted for printf rather than echo, but you could switch to a double-quoted string and use variable interpolation instead.