title: Get the data-id or the primary key of a selected item using jQuery / Laravel
body: <p>I have the following model form :</p>
  <p>view :</p>
  <pre class="lang-xml prettyprint-override"><code>&lt;div class=&quot;modal fade modal-right select-from-library&quot; id=&quot;libraryModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;libraryModal&quot; aria-hidden=&quot;true&quot; data-backdrop=&quot;static&quot;&gt;
    &lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
      &lt;div class=&quot;modal-content&quot;&gt;
  
        &lt;div class=&quot;modal-header&quot;&gt;
          &lt;h5 class=&quot;modal-title&quot;&gt;Select from Library&lt;/h5&gt;
          &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
            &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
  
        &lt;div class=&quot;modal-body scroll pt-0 pb-0 mt-4 mb-4&quot;&gt;
          &lt;div class=&quot;accordion&quot; id=&quot;accordion&quot;&gt;
            &lt;div class=&quot;mb-2&quot;&gt;
              &lt;button class=&quot;btn btn-link p-0 folder-button-collapse&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#collapseOne&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;collapseOne&quot;&gt;
                &lt;span class=&quot;icon-container&quot;&gt;
                  &lt;i class=&quot;simple-icon-arrow-down&quot;&gt;&lt;/i&gt;
                &lt;/span&gt;
                &lt;span class=&quot;folder-name&quot;&gt;Data&lt;/span&gt;
              &lt;/button&gt;
              &lt;div id=&quot;collapseOne&quot; class=&quot;collapse show&quot; data-parent=&quot;#accordion&quot;&gt;
                &lt;div class=&quot;list disable-text-selection&quot;&gt;
                  &lt;div class=&quot;row&quot;&gt;
                    &lt;div class=&quot;test&quot;&gt;
                      &lt;div class=&quot;d-flex align-self-stretch&quot;&gt;&lt;/div&gt;
                      &lt;div class=&quot;d-flex flex-grow-1 min-width-zero&quot;&gt;
                        &lt;div class=&quot;card-body pr-1 pt-2 pb-2 align-self-center d-flex min-width-zero&quot;&gt;
                          &lt;div class=&quot;w-100 name_casting&quot;&gt;
                            &lt;!--  &lt;p class=&quot;truncate mb-0&quot;&gt;OK&lt;/p&gt; --&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;custom-control custom-checkbox pl-1 pr-1 align-self-center&quot;&gt;
                          &lt;label class=&quot;custom-control custom-checkbox mb-0&quot;&gt;&lt;/label&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      
        &lt;div class=&quot;modal-footer&quot;&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-primary&quot; data-dismiss=&quot;modal&quot;&gt;Annuler&lt;/button&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-primary sfl-submit&quot; id=&quot;submit&quot; name=&quot;submit&quot;&gt;Générer&lt;/button&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The following script which gets data and display it in this modal :</p>
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
  $(document).ready(function() {
    $('#numero_projet').change(function() {
      var id_projet = $(this).find(&quot;option:selected&quot;).data(&quot;id&quot;);
      console.log(id_projet);
      
      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name=&quot;_token&quot;]').attr('content')
        }
      });
              
      $.ajax({
        url: &quot;getProjet/&quot;+id_projet,
        type: &quot;GET&quot;,
        success:function(html) {
          renderTemplate(html)
        }        
      });
      
      function renderTemplate(html) {
        var content = html.castings.map((casting) =&gt; `&lt;div class=&quot;cast col-6 mb-1 sfl-item-container&quot; data-preview-path=&quot;{{ URL::to('/') }}/castingimages/${casting.photo}&quot; data-path=&quot;{{ URL::to('/') }}/castingimages/${casting.photo}&quot; data-label=&quot;${casting.nom} ${casting.prenom}&quot; data-id=&quot;${casting.id_casting}&quot;&gt;
              &lt;div class=&quot;card d-flex mb-2 p-0 media-thumb-container&quot;&gt;
              &lt;div class=&quot;d-flex align-self-stretch&quot;&gt;
              &lt;img src=&quot;{{ URL::to('/') }}/castingimages/${casting.photo}&quot; alt=&quot;uploaded image&quot; class=&quot;list-media-thumbnail responsive border-0&quot;/&gt;
              &lt;/div&gt;
              &lt;div class=&quot;d-flex flex-grow-1 min-width-zero&quot;&gt;
              &lt;div class=&quot;card-body pr-1 pt-2 pb-2 align-self-center d-flex min-width-zero&quot;&gt;
              &lt;div class=&quot;w-100&quot;&gt;
                &lt;p class=&quot;truncate mb-0&quot;&gt;${casting.nom} ${casting.prenom}&lt;/p&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              &lt;div
              class=&quot;custom-control custom-checkbox pl-1 pr-1 align-self-center&quot;&gt;
              &lt;label class=&quot;custom-control custom-checkbox mb-0&quot;&gt;
              &lt;input type=&quot;checkbox&quot; class=&quot;custom-control-input&quot;&gt;
              &lt;span class=&quot;custom-control-label&quot;&gt;&lt;/span&gt;
              &lt;/label&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;&lt;/div&gt;
                                                   
        `);
           
        $(&quot;div.test&quot;).append(content);
      }
    })
  })
  &lt;/script&gt;
  </code></pre>
  <p>It looks like :</p>
  <p><a href="https://i.stack.imgur.com/0ihIE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0ihIE.png" alt="enter image description here" /></a></p>
  <p>When I click on chechbox and then the button <code>générer</code> I get the following result according to this code :</p>
  <pre class="lang-xml prettyprint-override"><code>&lt;div class=&quot;select-from-library-container mb-1&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-sm-12 col-md-6 col-xl-4&quot;&gt;
        &lt;div class=&quot;select-from-library-button sfl-multiple mb-5&quot; data-library-id=&quot;#libraryModal&quot; data-count=&quot;-1&quot;&gt;
          &lt;div class=&quot;card d-flex flex-row mb-4 media-thumb-container justify-content-center align-items-center&quot;&gt;
            Select from library
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;selected-library-item sfl-selected-item mb-5&quot;&gt;
          &lt;div class=&quot;card d-flex flex-row media-thumb-container&quot;&gt;
            &lt;a class=&quot;d-flex align-self-center&quot;&gt;
              &lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=&quot; alt=&quot;uploaded image&quot; class=&quot;list-media-thumbnail responsive border-0 sfl-selected-item-image&quot; /&gt;
            &lt;/a&gt;
            &lt;div class=&quot;d-flex flex-grow-1 min-width-zero&quot;&gt;
              &lt;div class=&quot;card-body align-self-center d-flex flex-column justify-content-between min-width-zero align-items-lg-center&quot;&gt;
                &lt;a class=&quot;w-100&quot;&gt;
                  &lt;p class=&quot;list-item-heading mb-1 truncate sfl-selected-item-label&quot;&gt;&lt;/p&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;pl-1 align-self-center&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;btn-link delete-library-item sfl-delete-item&quot;&gt;
                  &lt;i class=&quot;simple-icon-trash&quot;&gt;&lt;/i&gt;
                &lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The result looks like :</p>
  <p><a href="https://i.stack.imgur.com/Sy78n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Sy78n.png" alt="enter image description here" /></a></p>
  <p>Now I want get the data-id or for example the primary key of the selected items in this bloc to send it using an ajax request to get the data from database.</p>
  <p>I'm stuck in this point , if you have any idea about how can I get the id of the selected item in the last bloc that I mentioned I would be grathful.</p>
  <p>Thank you in advance</p>
  <p><strong>UPDATE</strong></p>
  <p>I'm trying to get the data-id of each selected item :</p>
  <p>so I'm trying that :</p>
  <pre><code>var dataID = $('cast').data('data-id');
  alert(dataID);
  </code></pre>
  <p>But I'm getting : <code>undefined</code></p>