title: Send data by post by row id from foreach loop(Opencart 3)
body: <p>I have table which is generation by foreach loop( in opencart 3 it is for loop(symphony syntax)). I have edit button for each row and open modal with realted info by row_id. But on form submit by ajax it does not takes choosen row id and takes last row_id.(i am sending by hidden input, but nor working) How can I send choosen ID and do update by require id? here is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on('click', '#saveeditedrule', function(e) {
    e.preventDefault();
  
    var action = $(this).data('action');
    var rule_id = $('#rule_id').val();
  
    $.ajax({
      type: "post",
      url: action,
      cache: false,
      data: {
        'credit_rule_id': rule_id
      },
      beforeSend: function() {
        console.log('Start...');
  
      },
      complete: function() {
        $('#saveeditedrule').button('reset');
      },
      success: function(data) {
        alert(rule_id);
        console.log('done');
  
      },
      error: function() {
        console.log('something is wrong');
      }
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
  &lt;table id="examples" class="table table-striped table-bordered" style="width:100%"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;column1&lt;/th&gt;
        &lt;th&gt;column 2&lt;/th&gt;
        &lt;th width="80px"&gt;Action&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      {% for rules in credittules %}
      &lt;tr&gt;
  
        &lt;td&gt;Something&lt;/td&gt;
        &lt;td&gt;Something 2&lt;/td&gt;
        &lt;td&gt;
          &lt;button type="button" class="btn btn-info" data-toggle="modal" data-target="#editModal{{ rules.credit_rule_id }}"&gt;Edit&lt;/button&gt;
        &lt;/td&gt;
  
        &lt;!-- here is my modal---&gt;
        &lt;div class="modal fade" id="editModal{{ rules.credit_rule_id }}" role="dialog"&gt;
          &lt;div class="modal-dialog"&gt;
            &lt;!-- Modal content--&gt;
            &lt;div class="modal-content"&gt;
              &lt;form id="form-rule" enctype="multipart/form-data"&gt;
                &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;Title&lt;/h4&gt;
                &lt;/div&gt;
  
                &lt;div class="modal-body"&gt;
                  &lt;input type="hidden" name="rule_id" id="rule_id" value="{{ rules.credit_rule_id }}" /&gt;
  
                &lt;/div&gt;
                &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-danger pull-left" data-toggle="modal" data-target="#deleteconfirm" data-loading-text="{{ text_loading }}"&gt;{{ text_sil }}&lt;/button&gt;
                  &lt;button type="button" class="btn btn-info" data-target="#editconfirm" data-loading-text="{{ text_loading }}"&gt;&lt;i class="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;{{ text_edit }}&lt;/button&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;{{ text_no }}&lt;/button&gt;
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="modal fade" id="deleteconfirm" role="dialog"&gt;
          &lt;div class="modal-dialog"&gt;
            &lt;div class="modal-content"&gt;
              &lt;div class="modal-footer"&gt;
                &lt;p style="text-align:center;"&gt;{{ text_confirm_delete }}&lt;/p&gt;
                &lt;hr /&gt;
                &lt;button type="button" class="btn btn-danger pull-left" data-dismiss="modal"&gt;{{ text_no }}&lt;/button&gt;
                &lt;button type="button" class="btn btn-success pull-right" data-action="{{ action_delete_rule }}" data-dismiss="modal" id="deleteeditedrule"&gt;{{ text_yes }}&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="modal fade" id="editconfirm" role="dialog" style="z-index: 1051;"&gt;
          &lt;div class="modal-dialog"&gt;
            &lt;div class="modal-content"&gt;
              &lt;div class="modal-footer"&gt;
                &lt;p style="text-align:center;"&gt;{{ text_confirm_edit }}&lt;/p&gt;
                &lt;hr /&gt; {{ rules.credit_rule_id }}
                &lt;button type="button" class="btn btn-danger pull-left" data-dismiss="modal"&gt;{{ text_no }}&lt;/button&gt;
                &lt;button type="button" class="btn btn-success pull-right" data-action="{{ action_rule }}" data-dismiss="modal" id="saveeditedrule"&gt;{{ text_yes }}&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/tr&gt;
  
      {% endfor %}
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>