menampilkan data ke modal

jadi gini, itukan agan lakukan @foreach (perulangan) tiap comment beserta modalnya. dan modal yang agan @foreach itu memiliki id="comment-modal". Masih ingat dengan html selector? id dikhususkan untuk single element. Makanya kode ini:

$('.create-comment').on('click', function (event) {
    event.preventDefault();
    $('#comment-modal').modal();
});

pastinya akan menampilkan/show modal dengan id="comment-modal" yang pertama saja. Kalau bingung kasus ini, silahkan ingat2 kembali mengenai id html.

Ada 2 solusi yang bisa digunkan untuk kasus ini. 1. Tetap dengan kode dan struktur yang sama namun id-nya lebih dispesifikkan lagi. Edit baris2 berikut:

// edit baris ini
<div class="interaction">
   // tambahkan data-modal untuk memperjelas modal yang mana yang ingin dimunculkan
   <a href="#" class="create-comment" data-modal="{{ $posts->id }}">Comment</a>
</div>

// edit juga baris ini
// spesifikkan id modal dengan cara tambah $posts->id
<div class="modal fade" role="dialog" id="comment-modal-{{ $posts->id }}">
// kode2 lainnya seperti diatas ada dalam sini
...
</div>

// edit juga jquerynya jadi gini:
$('.create-comment').on('click', function (event) {
    event.preventDefault();
    // tangkap id modal yang ingin dimunculkan
    var id = $(this).attr('data-modal');

    // munculkan modal berdasarkan id
    $('#comment-modal-'+id).modal();
});

semestinya code ini berjalan sesuai keinginan agan. Tapi, saya tidak menyarankan cara seperti ini. kenapa? metode ini kurang baik, bisa menyebabkan web terasa berat, dan kurang efisien. sebab agan lakukan @foreach comment beserta modalnya. Kenapa kita tidak berpikir, kita gunakan @foreach pada comment saja dan kita cukup buat 1 modal yang nantinya valuenya bisa diubah2. ini dia cara kedua.

2. Lakukan perulangan hanya pada comment dan buat 1 modal saja. Rubah kode anda jadi gini:

// perulangan hanya pada comment
@foreach($post as $posts)
<div class="post" data-postid="{{ $posts->id }}">
   <div class="article">
      <p>{{ $posts->body }}</p>
   </div>
   <div class="interaction">
      <a href="#" class="create-comment">Comment</a>
   </div>

   // baris berikutnya dan seterusnya (bagian modal) potong dan bawa keluar dari @foreach
</div>
@endforeach

// ini dia baris yang dipotong
// dan kosongkan data2 didalamnya
<div class="modal fade" role="dialog" id="comment-modal">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title">Comments</h4>
         </div>
         <div class="modal-body">
            // kosongkan textnya (*tempat memunculkan $posts->body)
            <text></text>
         </div>
         <div class="modal-footer">
            <div class="input-group">
               <input name="comment-body" type="text" class="form-control no-border" id="comment-body" placeholder="Post comment">
               <span class="input-group-btn">
                  <button type="button" class="btn btn-twitter btn-flat no-border post-comment">
                     <i class="fa fa-send fa-lg"></i>
                  </button>
               </span>
            </div>
         </div>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>

<script>
// jquerynya
$('.create-comment').on('click', function (event) {
    event.preventDefault();
    // tangkap data2 yang dibutuhkan untuk dimunculkan di modal
    // berdasarkan kode agan, yang agan butuhkan di modal hanya $post->body jadi tangkap value ini
    var postBody = $(this).parents('.post').find('.article>p').text();

    // isi data2 modal yang dibutuhkan
    $('#comment-modal .modal-body>text').text(postBody);
    // munculkan modal
    $('#comment-modal').modal();
});
</script>