title: Passing an id from foreach to jquery modal
body: <p>I want the modal to open when the user clicks on the create asset button, and after filling in the modal fields and clicking the save button, the asset group ID with the modal data is also received from foreach and sent via Ajax request.<br><br>
  <strong>How is this possible?</strong>  <br><br>
  <strong>foreach:</strong></p>
  <pre><code>@foreach ($AssetsGroup as $AssetGroup)
  &lt;tr id=&quot;assetgroup{{$AssetGroup-&gt;id}}&quot; class=&quot;active&quot;&gt;
      &lt;td&gt;{{$AssetGroup-&gt;name}}&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td width=&quot;auto&quot;&gt;
          // if click this button then modal show
          &lt;button id=&quot;btn_add&quot; name=&quot;btn_add&quot; value=&quot;{{ $AssetGroup-&gt;id }}&quot; data-toggle=&quot;modal&quot; and data-target=&quot;#assetModal&quot;&gt;create assets&lt;/button&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  @endforeach
  </code></pre>
  <p><strong>Jquery Modal:</strong></p>
  <pre><code>&lt;div class=&quot;modal fade&quot; id=&quot;assetModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;assetModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
    &lt;div class=&quot;modal-dialog&quot;&gt;
        &lt;div class=&quot;modal-content&quot;&gt;
            &lt;div class=&quot;modal-body&quot;&gt;
                &lt;form id=&quot;frmassets&quot; name=&quot;frmassets&quot; class=&quot;form-horizontal&quot; novalidate=&quot;&quot;&gt;
                    &lt;div class=&quot;form-group row&quot;&gt;
                        &lt;label for=&quot;name&quot;&gt;asset name&lt;/label&gt;
                        &lt;input type=&quot;text&quot; id=&quot;name2&quot; name=&quot;name2&quot;&gt;
                    &lt;/div&gt;
  
                    &lt;div class=&quot;form-group row&quot;&gt;
                        &lt;label for=&quot;name&quot;&gt;tags&lt;/label&gt;
                        &lt;input id=&quot;tags2&quot; name=&quot;tags2&quot; type=&quot;text&quot;/&gt;
                    &lt;/div&gt;
                &lt;/form&gt;
            &lt;/div&gt;
            &lt;div class=&quot;modal-footer&quot;&gt;
                &lt;button type=&quot;button&quot; id=&quot;btn-save&quot; value=&quot;add&quot;&gt;save&lt;/button&gt;
                &lt;input type=&quot;hidden&quot; id=&quot;asset_id&quot; name=&quot;asset_id&quot; value=&quot;0&quot;&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <br>
  <p><strong>Ajax:</strong></p>
  <pre><code>$(&quot;#btn-save&quot;).click(function (e) {
      $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name=&quot;csrf-token&quot;]').attr('content')
          }
      })
  
      e.preventDefault();
      var formData = {
          name: $('#name2').val(),
          group:  i want to resive group id from foreach and send group id with ajax request
          tags: $('#tags2').val(),
      }
  
      //used to determine the http verb to use [add=POST], [update=PUT]
      var state = $('#btn-save').val();
      var type = &quot;POST&quot;; //for creating new resource
      var asset_id = $('#asset_id').val();
      var my_url = '/assets';
      if (state == &quot;update&quot;){
          type = &quot;PUT&quot;; //for updating existing resource
          my_url += '/' + asset_id;
      }
      console.log(formData);
      $.ajax({
          type: type,
          url: my_url,
          data: formData,
          dataType: 'json',
          success: function (data) {
              ...
          },
          error: function (data) {
              console.log('Error:', data);
          }
      });
  });
  </code></pre>