AjaxとLaravelを使った動的コンテンツ

Question

私はlaravelで新しく、私はアコーディオン用の動的ajaxコンテンツを実装したいと考えています。私は連絡先グループとそのメンバーのリストを持っています。グループとメンバーは、多対多の関係を持っています。アコーディオンはすべてのグループを表示する必要があり、クリックするとそのグループに属するすべてのメンバーを表示する必要があります。

ここで、私はアコーディオンのすべてのグループをforループで表示できます。私がアコーディオンをクリックすると、IDは慰められるべきです。問題は、最初のアコーディオンのIDがクリックされたときに慰められることだけです。他のすべてのアコーディオンは、クリックするとIDが慰められません。

最初のアコーディオンのみが関連するメンバーをパネルに表示し、残りは空です。どうすればこの問題を解決できますか？

HTML

<legend>Display members from contact groups</legend> 
    @foreach($contactGroup as $contact) 
    <button type ="button" value="{!! $contact->id !!}" class="accordion" id="contact" name="contact">{!!$contact->first_name!!}</button> 
    <div class="panel" id="labels"> 
    </label> 
    </div> 
    @endforeach 

アヤックス

<script type="text/javascript"> 
$("#contact").on("click", function(e) { 
    e.preventDefault(); 

    console.log($(this).val)()); 
    $.ajax({type: "GET", 
     url: "/ajax-request?contact_id=" +contact_id, 
     data: 
     { contact_id: $(this).val(), 
      access_token: $("#access_token").val() 
     }, 
     success:function(result) {    
     $.each(result, function (i, myData) {  
     $("#labels").append('<label>'+myData.name+'</label>');     
    }); 

     }, 
      error:function(result) { 
      alert('error'); 
     } 
    }); 
}); 

</script> 

Answer 1

代わりのclass=accordion contact

してから、AJAXの部分で

使用を参照

<script type="text/javascript"> 
$(".contact").on("click", function(e) { 
    e.preventDefault(); 
    var $this = $(this); 

    console.log($this.attr('value')); 
    .... 
    .. 
    . 
}); 

</script> 

Idとクラスの違いを知るにはdiv class vs id