title: prevent modal from keeping data in cache following select choice
body: <p>In my twig view, I recover from a controller query, user infortmations in a table like this:</p>
  
  <pre><code>&lt;table id="userDataTables" class="display table-responsive" cellspacing="0" width="100%" style="font-size: 95%;"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Username&lt;/th&gt;
        &lt;th&gt;id&lt;/th&gt;
        &lt;th&gt;Email&lt;/th&gt;
        &lt;th&gt;phone&lt;/th&gt;
        &lt;th&gt;Registered at&lt;/th&gt;
        &lt;th&gt;Actions&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      {% for user in arrayuser %}
        &lt;tr&gt;
          &lt;td&gt;{{ user.username|capitalize }}&lt;/td&gt;
          &lt;td&gt;{{ user.id|capitalize }}&lt;/td&gt;
          &lt;td&gt;{{ user.emailCanonical }}&lt;/td&gt;
          &lt;td&gt;{{ user.phone }}&lt;/td&gt;
          &lt;td&gt;{{ user.createdAt|date("Y/m/d", "Europe/Paris") }}&lt;/td&gt;
          &lt;td&gt;
            &lt;select class="redirectSelect form-control"&gt;
              &lt;option value="" disabled selected style="font-weight: bold; font-style: italic; text-transform: lowercase; color: grey;"&gt;choisir une action&lt;/option&gt;
              &lt;option value="{{ path('consumer_profile_edit', {'slug': user.slug }) }}"&gt;Edit Profile&lt;/option&gt;
              &lt;option value="{{ path('index_admin_consumer_comment_pannel', {'slug': user.slug }) }}"&gt;Show comment(s)&lt;/option&gt;
              &lt;option class="deleteInscription" value="#" data-href="{{ path('delete_user_process', {'id': user.id}) }}" data-toggle="modal" data-target="#consumerDeleteModal" style="font-weight: bold; color: #CF000F;"&gt;Delete user&lt;/option&gt;
            &lt;/select&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      {% endfor %}
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>As you can see I have a select tag like this foreach user lines in my table:</p>
  
  <pre><code>&lt;select class="redirectSelect form-control"&gt;
      &lt;option value="" disabled selected style="font-weight: bold; font-style: italic; text-transform: lowercase; color: grey;"&gt;choisir une action&lt;/option&gt;
      &lt;option value="{{ path('consumer_profile_edit', {'slug': user.slug }) }}"&gt;Edit Profile&lt;/option&gt;
      &lt;option value="{{ path('index_admin_consumer_comment_pannel', {'slug': user.slug }) }}"&gt;Show comment(s)&lt;/option&gt;
      &lt;option class="deleteInscription" value="#" data-href="{{ path('delete_user_process', {'id': user.id}) }}" data-toggle="modal" data-target="#consumerDeleteModal" style="font-weight: bold; color: #CF000F;"&gt;Delete user&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I show a modal only if an admin selected the choice "Delete user".</p>
  
  <p>But, in fact the modal keeps the toggled data, so even if I choose a different user I want to delete, it's not the right which is deleted because of the modal cache I think. So I would like to find a solution to clear this cache, or to create a process as the modal target the right user id and delete the right one.</p>
  
  <h2>EDIT</h2>
  
  <blockquote>
    <p>The modal keeps always the first entry of user array I return in my
    view. For example, I return an array with 20 users, with their
    informations like ids, names, phones, emails ... etc <strong>ORDER BY id ASC</strong>.</p>
    
    <p>If I choose <strong>user</strong> with id <strong>5</strong> and I want to delete him, all my process
    concerning the query to delete a particular user following his <strong>id</strong> worked well in my php script. By
    adding a modal to prevent that this action is permanent, it <strong>always</strong>
    <strong>deletes</strong> the <strong>first</strong> <strong>entry</strong> (so the first user with id 1 is deleted), not the user with id 5.</p>
  </blockquote>
  
  <p>This is the html and the script for the modal ?</p>
  
  <pre><code>&lt;div class="modal fade" id="consumerDeleteModal" tabindex="-1" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Delete user:&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;div class="alert alert-warning"&gt;
            &lt;p&gt; Warning &lt;b&gt; this action is permanent ! &lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="deleteConsumerForm"&gt;
            &lt;p&gt; &lt;b&gt;Delete user permanently ?&lt;/b&gt; &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
          &lt;a alt="effacer consommateur"&gt;
            &lt;button id="confirmDeletion" type="button" class="btn btn-danger"&gt;Confirm&lt;/button&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;!-- /.modal-content --&gt;
    &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;&lt;!-- /.modal --&gt;
  
  &lt;script type="text/javascript" charset="utf-8" async defer&gt;
    // manage modal on google chrome
    $('.redirectSelect').on('change', function () {
      var url = $(this).val();
      if (url === "#") { // require a URL
        console.log(url);
        $('#consumerDeleteModal').modal()
      } else if (url !== "#") {
        console.log(url);
        window.location = url;
      } else {
        return false;
      }
    });
  
    // deleted function
    $('#confirmDeletion').bind('click', function() {
      var deleteTarget = $('.deleteInscription').attr('data-href');
      if (deleteTarget == null){
        console.log("failed !!!");
      } else {
        console.log("prepare to delete the user !!!");
        $(this).attr('href', deleteTarget);
        window.location.href = deleteTarget;
      }
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I proceed ?</p>