Why my modal shows tiny options only in the last id value/item?

Issue

Im trying to call a modal to edit a data saved in my database. The "observacao" field uses tiny to format its values. Im using twig also. But when i call the modal, only the last data saved (only whith last id item) shows the tiny options and format in the observacao field. If i try to call another item/id, the modal shows the value but without formatting with tiny.

This is the modal code

{% for matriz in matrizes %}
<div class="modal fade " id="ModalEdit{{matriz.id}}" tabindex="-1" role="dialog" aria-labelledby="ModalCentral" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header modal-header-primary">
        <h5 class="modal-title" id="TituloModalCentralizado">Editar Matriz</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="{{ doc_root }}matriz/matriz-edit/{{ matriz.id }}" method="POST"  enctype="multipart/form-data">
        <div class="modal-body">
          <br>
          <div class="row">
             <div class="col-5"> 
                <div class="form-group">
                      <label for="title">Nome: </label>
                      <input type="text" name="name" id="name" value="{{ matriz.name }}" class="form-control">
                      <span class="errors">{{ errors.title }}</span>
                </div>
                <div class="form-group">
                      <label for="title">Senha: </label>
                      <input type="password" name="password" id="password" value="" class="form-control text-right" style="width: 200px;">
                      <span class="errors">{{ errors.password }}</span>
                </div>
                <br>
              </div>
              <div class="col-6 ml-5"> 
                    <div class="form-group">
                      <label for="article-content">Observação: </label>
                      <textarea name="observacao" id="matriz-observacao" class="form-control">{{ matriz.observacao | raw}}</textarea>
                      <span class="errors">{{ errors.observacao }}</span>
                    </div>
              </div>
          </div>
          <br>
          <br>
      {% if errors.message %}<div class="alert alert-danger">{{ errors.message }}</div>{% endif %}
        </div>
        <div class="modal-footer">
          <section class="text">
            <br>
            <input type="hidden" name="member_id" value="{{ session.id }}" />
            <input type="hidden" name="investimento_id" value="{{ session.investimento_id }}" />
            <span class="errors">{{ errors.member }}</span>
            <input type="submit" name="update" value="Salvar" class="btn btn-primary mr-2">
          </section>
        </div>
      </form>
    </div>
  </div>
</div>
{% endfor %}

and i call it whith this script:

<script type="text/javascript">
  $('#ModalEdit{{matriz.id}}').on('shown.bs.modal', function () {
    alert("modal open");
    $('#meuInput').trigger('focus')
  })
</script>

and call tiny with this one:

  <script src="https://cdn.tiny.cloud/1/kwdb6s3lt2pbcfu9m220i0kok6vcr80w8se19hgmpv9jeaps/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
    if (document.getElementById('matriz-observacao')){
      tinymce.init({
        menubar: false,
        selector: '#matriz-observacao',
        toolbar: 'bold italic link',
        plugins: 'link',
        target_list: false,
        link_title: false
      });
    }
  </script>

What should i do to show tiny options for all itens when called by a modal ?

Solution

The matriz-observacao id is used for more than 1 element, I would change it to include {{matriz.id}} in all input field ids. For tinymce use a class as the selector so it applies to all fields with that class.

Note I haven't used tinymce so if the class selector doesn't work, you can use document.getElementsByClassName() and loop through all fields.

{% for matriz in matrizes %}
<div class="modal fade " id="ModalEdit{{matriz.id}}" tabindex="-1" role="dialog" aria-labelledby="ModalCentral" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header modal-header-primary">
        <h5 class="modal-title" id="TituloModalCentralizado">Editar Matriz</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="{{ doc_root }}matriz/matriz-edit/{{ matriz.id }}" method="POST"  enctype="multipart/form-data">
        <div class="modal-body">
          <br>
          <div class="row">
             <div class="col-5"> 
                <div class="form-group">
                      <label for="name{{ matriz.id }}">Nome: </label>
                      <input type="text" name="name" id="name{{ matriz.id }}" value="{{ matriz.name }}" class="form-control">
                      <span class="errors">{{ errors.title }}</span>
                </div>
                <div class="form-group">
                      <label for="password{{ matriz.id }}">Senha: </label>
                      <input type="password" name="password" id="password{{ matriz.id }}" value="" class="form-control text-right" style="width: 200px;">
                      <span class="errors">{{ errors.password }}</span>
                </div>
                <br>
              </div>
              <div class="col-6 ml-5"> 
                    <div class="form-group">
                      <label for="matriz-observacao{{ matriz.id }}">Observação: </label>
                      <textarea name="observacao" id="matriz-observacao{{ matriz.id }}" class="form-control tinyField">{{ matriz.observacao | raw}}</textarea>
                      <span class="errors">{{ errors.observacao }}</span>
                    </div>
              </div>
          </div>
          <br>
          <br>
      {% if errors.message %}<div class="alert alert-danger">{{ errors.message }}</div>{% endif %}
        </div>
        <div class="modal-footer">
          <section class="text">
            <br>
            <input type="hidden" name="member_id" value="{{ session.id }}" />
            <input type="hidden" name="investimento_id" value="{{ session.investimento_id }}" />
            <span class="errors">{{ errors.member }}</span>
            <input type="submit" name="update" value="Salvar" class="btn btn-primary mr-2">
          </section>
        </div>
      </form>
    </div>
  </div>
</div>
{% endfor %}

Tiny code

<script src="https://cdn.tiny.cloud/1/kwdb6s3lt2pbcfu9m220i0kok6vcr80w8se19hgmpv9jeaps/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    if (document.getElementsByClassName('tinyField').length > 0) {
      tinymce.init({
        menubar: false,
        selector: '.tinyField',
        toolbar: 'bold italic link',
        plugins: 'link',
        target_list: false,
        link_title: false
      });
    }
</script>

Answered By - Asis