Want to include foreach in a jquery/ajax based load-more functionality in Laravel 4

Want to include foreach in a jquery/ajax based load-more functionality in
Laravel 4

This is a little involved. I have a load-more functionality that is being
driven by javascript/ajax. When a user clicks on the "more" button, more
data should be displayed. This is working fine, but I want to add the
"friends" that a user has that have liked the same thing as the user for
each row of the table. Here is the javascript:
<script type="text/javascript">
$(function() {
<?php $number_of_likes = 3; ?>;
<?php $_SESSION['likes_start'] = isset($_SESSION['likes_start']) ?
$_SESSION['likes_start'] : $number_of_likes; ?>;
var init = {{ Session::get('likes_start', 3) }};
var initialLikes = <?php echo Fanartist::fan_likes_json(0,
$_SESSION['likes_start']); ?>;
var desiredLikes = <?php echo $number_of_likes; ?>;
var likes_template = '<div class="activity_sub_header">You want <span
class="stage_name"></span> to play {{Auth::user()->city}}!</div>'
+'<br>'
+'<div class="description">'
+'<div class="activity_body">description ... <a
href="/artists/id">See more...</a></div>'
+'</div>'
+'<div class="image"><a href="/artists/id"><img
src="image_path" alt="" height="80" width="80"
class="img-rounded"></a>'
+'</div>'
+'<br><br><br>';
var likes = $('#likes'),
// Element to load the posts
perscontent = likes.find('.perscontent'),
// the more button
load = likes.find('.load'),
// the post counter
counter = likes.find('.badge');
// Create alerts elements (Display Success or Failure)
var alerts = {
requestEmpty : $('<div class="alert alert-info">No more data</div>'),
requestFailure : $('<div class="alert alert-error">Could not get
the data. Try again!</div>')
}
var progressElement = $('<div class="progress"
style="margin-bottom:0"><div class="bar"></div></div>');
var progressBar = progressElement.find('.bar');
var postHandler = function(likes){
// Set the progress bar to 100%
progressBar.css('width', '100%');
// Delay the normal more button to come back for a better effect
window.setTimeout(function(){load.html('More <span
class="caret"></span>')}, 500);
// insert childrens at the end of the perscontent element
for (like in likes){
// Clone the element
var $like = $(likes_template).clone();
$like.attr('id', 'like-' + likes[like].ID);
var $imgLike = $like.filter('div.image').find('img');
$imgLike.attr('src',
$imgLike.attr('src').replace('image_path',
likes[like].image_path));
$imgLike.attr('alt', likes[like].stage_name);
var $imgId = $like.filter('div.image');
$imgId.html($imgId.html().replace('id', likes[like].id));
var $spanLike = $like.find('div.activity_body');
$spanLike.html($spanLike.html().replace('description',
likes[like].description));
$spanLike.html($spanLike.html().replace('id', likes[like].id));
$like.find('.id').html(likes[like].id);
//$like.find('.image_path').html(likes[like].image_path);
$like.find('.stage_name').html(likes[like].stage_name);
$like.find('.city').html(likes[like].city);
$like.find('.state').html(likes[like].state);
// $like.find('.description').html(likes[like].description);
perscontent.append($like);
}
perscontent.animate({
scrollTop: $('#like-' + likes[0].ID).offset().top +
(perscontent.scrollTop()- perscontent.offset().top)
}, 200);
}
// place the initial posts in the page
postHandler(initialLikes);
// add the click event to the more button
load.click(function(){
// Set the progress bar to 0%
progressBar.css('width', '0%');
// remove the more button innerHTML and insert the progress bar
load.empty().append(progressElement);
// AJAX REQUEST
$.ajax({
url: "http://crowdtest.dev:8888/fans/setup_fan_likes",
type: 'GET',
// We do not want IE to cache the result
cache: false,
data: {
'init': init,
'desiredLikes': desiredLikes
}
}).success(function (data, text) {
// parse the response (typeof data == String)
data = JSON.parse(data);
if (data.length > 0){
// Update the total number of items
init += data.length;
// Update the counter
counter.html(init);
// load items on the page
postHandler(data);
}else{
$alert = alerts.requestEmpty;
// insert the empty message
likes.prepend($alert);
// Set the progress bar to 100%
progressBar.css('width', '100%');
// Remove the more button
window.setTimeout(function(){load.remove()}, 500);
// remove the empty message after 4 seconds
window.setTimeout(function(){$alert.remove()}, 4000);
}
}).error(function (request, status, error) {
$alert = alerts.requestFailure;
// insert the failure message
likes.prepend($alert);
// Set the progress bar to 100%
progressBar.css('width', '100%');
// Delay the normal more button to come back for a better effect
window.setTimeout(function(){load.html('More <span
class="caret"></span>')}, 500);
});
});
console.log(desiredLikes);
console.log(init);
console.log(initialLikes);
});
</script>
In the view I have, here is the code:
<div id="likes">
<div class="perscontent"></div>
<button class="load btn btn-block">
More <span class="caret"></span>
</button>
</div>
Now, for each row of data that is displayed, I would like to show the
friends. Originally (before the load-more functionality), I used the
following piece of code in the view:
@foreach($fan_likes as $fan_like)
<?php $b=0; $hold2=0; ?>
@foreach($friend_likes as $friend_like)
@if($fan_like->id==$friend_like->artist_id)
@foreach ($array as $x)
@if($friend_like->fbid==$x)
@if($hold2 < 6)
<img
src="https://graph.facebook.com/{{ $x
}}/picture" alt="" height="40"
width="40" class="img-rounded">
@endif
<?php $b++; $hold2++; ?>
@endif
@endforeach
@endif
@endforeach
<br>
{{$b}} of your friends want {{$fan_like->stage_name}}
to play their city!
<br><br>
@endforeach
This code displayed the images of the friends that have liked the same
artist as the current user. My question is, how do I append this to each
line of data displayed by the load-more functionality? (i.e. how do I have
it appear right under the likes_template for each piece of data?) Thank
you for your help.