Несколько аудиоплееров Jplayer от Laravel DB

Я пытаюсь создать несколько экземпляров Jplayer, каждый из которых воспроизводит разные аудиофайлы из моей базы данных Laravel (таблица называется архивами), и я застрял в точке, в которой код jQuery соответствует коду Laravel.

Пока воспроизводятся аудиоплееры, но они воспроизводят один и тот же файл.

Также у меня возникают проблемы, когда я захожу глубже на сайт. Например: с mydomain.com/segments/ аудиоплеер добавляет «сегменты» в URL, а не просто в публичный каталог. Я знаю, что подобную проблему можно решить с помощью URL: asset в Laravel, но я не уверен, как с этим справиться, так как файл получает jquery.

Здесь я пытаюсь создать несколько экземпляров jplayer, используя Forloop laravel (мне нужно начать с 2, потому что игрок 1 используется в другом месте). Я не совсем понимаю, как смешивать код Laravel и Jquery.

Это все в моем 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

Главная страница Blade View (нужно начать с игрока № 2, добавьте 1 к идентификатору игрока для каждого игрока, которого он создает)

<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 <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
</div>
</div><!--end playerAndInfo-->
</div> <!-- end single latest -->

<!--  {{ $count = $count +1}} -->
@endforeach
</div><!-- End latest -->

Спасибо!