Multiple Jplayer audio players from Laravel DB - php

Question

I'm trying to create multiple instances of Jplayers that each play a different audio file from my Laravel Database (table called archives) and i'm stuck at the point the jQuery code meets the Laravel code.
So far the audio players play but they play the same file.
also i have trouble when i navigate deeper into the website. ex: with mydomain.com/segments/ the audio player adds "segments" to the url instead of just the public directory. I know a similar issue can be solved with the URL:asset in Laravel, but i'm not sure how to with this since it's the jquery that's getting the file.
This is where i try to create my multiple jplayer instances using a laravel Forloop (i need to start at 2 because player 1 is being used elsewhere)I'm confused about how to mix the Laravel and Jquery code.
This is all in my footer.blade.php
<!--{{{$counter = 2}}}-->
#foreach ($archives as $archive)
<script>
var counter = "{{$counter}}";
var file = "archiveAudio/{{$archive->audioFile}}";
$(document).ready(function(){
$("#jquery_jplayer_"+ counter).jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
title: "Hidden",
mp3: file,
oga: ""
});
},
play: function() { // To avoid multiple jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
swfPath: "../../js",
supplied: "mp3, oga",
cssSelectorAncestor: "#jp_container_" + counter,
wmode: "window",
globalVolume: true,
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true
});
counter ++;
});
</script>
#endforeach
Home page Blade View (needs to start with #2 player add 1 to the player ID for each player it creates)
<div id="latest">
<!-- {{ $count = 2}} -->
#foreach ($archives as $archive)
<div class="singleLatest">
<img src = "/images/segments/{{$archive->segment->image}}" width="100px;"/>
<div class="playerAndInfo">
<h3> {{ $archive->archiveTitle}}<br>{{$archive->segment->name}}</h3>
<div id="jquery_jplayer_{{$count}}" class="jp-jplayer"></div>
<div id="jp_container_{{$count}}" class="jp-audio" role="application" aria-label="media player">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<div class="jp-controls">
<button class="jp-play" role="button" tabindex="0">play</button>
</div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time" role="timer" aria-label="time"> </div>
<div class="jp-duration" role="timer" aria-label="duration"> </div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
</div>
</div>
</div><!--end playerAndInfo-->
</div> <!-- end single latest -->
<!-- {{ $count = $count +1}} -->
#endforeach
</div><!-- End latest -->
Thanks!