title: Is it possible to change a Bootstrap modal ID dynamically?
body: <p>My Twig loop is generating Bootstrap cards. In each cards there's a button (#modal1) to open a modal. My problem is that when i have 2 or more cards on screen, I can't get the community ID of those cards since modal#1  will always give me the ID of the first one.</p>
  
  <p>Is it possible with JS/Jquery to change the id = "modal1" and data-target="#modal1" to make this correspond to each card ?</p>
  
  <p>Thanks.</p>
  
  <pre><code>&lt;div class="row rowcards"&gt;
    {% for community in data %}
    &lt;div class="col-md-3 removable"&gt;
      &lt;div class="card" id="{{community.id}}"&gt; 
        &lt;div class="card-body"&gt;
          &lt;a href="#" id="threedot" class="btn dropdown-toggle" datatoggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;&lt;i class="fas fa-ellipsis-v"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;!-- menu --&gt;
          &lt;div class="dropdown-menu"&gt;
            &lt;p class="text-center"&gt;&lt;a href="#" class="modifylink"&gt;{{ 'Modifiy' | trans }}&lt;/a&gt;&lt;/p&gt;
            &lt;p class="text-center"&gt;&lt;a href="#" data-id="{{community.id}}" class="text-danger deletelink"&gt;&lt;i class="fas fa-trash-alt"&gt;&lt;/i&gt;{{ 'Delete' | trans }}&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;p class="card-title"&gt;{{ community.info.name }}&lt;/p&gt;
          &lt;p class="card-text"&gt;&lt;i class="fas fa-users"&gt;&lt;/i&gt; 4 membres&lt;/p&gt;
          &lt;div class="text-center"&gt; 
            &lt;button class="btn btn-primary btn-card" data-toggle="modal" data-target="#modal1"&gt;&lt;i class="fas fa-user-plus"&gt;&lt;/i&gt; {{ 'Add member' | trans }}&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div data-id="{{community.id}}" class="modifyForm"&gt;
        &lt;div class="form-group"&gt;
          &lt;small class="form-text text-muted text-center"&gt;{{ 'Change Community' | trans }}&lt;/small&gt;
          &lt;input data-id="{{community.id}}" maxlength="30" type="text" class="form-control" name="changename" required /&gt;
        &lt;/div&gt;
        &lt;button type="submit" data-id="{{community.id}}" class="btn btn-primary changecommunity"&gt;{{ 'Validate' | trans }}&lt;/button&gt;
        &lt;button type="submit" data-id="{{community.id}}" class="btn btn-danger toggleback"&gt;Annuler&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    {% endfor %}
  </code></pre>
  
  <p>The modal :</p>
  
  <pre><code>&lt;!-- Modal add member --&gt;
  {% for community in data %}
  &lt;div class="modal hide fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
        &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content" id="{{community.id}}"&gt;
            &lt;div class="modal-body"&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;h5 class="text-primary"&gt;Ajouter une personne à votre communauté&lt;/h5&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="create-givenname"&gt;{{ "Given name" | trans }}&lt;/label&gt;
                &lt;input name="givenName" type="text" class="form-control" id="create-givenname" aria-describedby="givennameHelp"
                 placeholder="{{ "Given name" | trans }}"&gt; 
              &lt;/div&gt; 
              &lt;div class="form-group"&gt;
                &lt;label for="create-familyname"&gt;{{ "Family name" | trans }}&lt;/label&gt;
                &lt;input name="familyName" type="text" class="form-control" id="create-familyname" aria-describedby="familynameHelp"
                 placeholder="{{ "Family name" | trans }}"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="create-email"&gt;{{ "Email address" | trans }}&lt;/label&gt;
                &lt;input name="email" type="email" class="form-control" id="create-email" aria-describedby="emailHelp"
                 placeholder="{{ "Email address" | trans }}"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button type="submit" data-id="{{community.id}}" class="btn btn-primary addmember" data-dismiss="modal"&gt;Valider&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
     {% endfor %}
  </code></pre>