Rename id with jquery

Question

I have this code where I need to change the name of two id when I click on a calendar event

eventClick:  function(event, jsEvent, view) {
                endtime = $.fullCalendar.moment(event.end).format('h:mm');
                starttime = $.fullCalendar.moment(event.start).format('dddd, D MMMM YYYY, h:mm');
                var mywhen = starttime + ' - ' + endtime;
                var mywhen2 = event.id;
                $('#modalTitle_excluir').html(event.title);
                $('#modalWhen_excluir').text(mywhen);
                $('#eventID_faturar_outro').text(event.id);
                $('#id_do_form_faturar').attr('data-formid', event.id);
                $('#resultado_empresa_').attr('id', 'resultado_empresa_'+event.id);


                $('#calendarModal_excluir').modal();
            },

I’m using this to change the name of the id

$('#id_do_form_faturar').attr('data-formid', event.id);
$('#resultado_empresa_').attr('id', 'resultado_empresa_'+event.id);

The data-formid="" works every time I click on an event opens a modal with the event id (data-formid="id_event").

In the #resultado_company_ also changes, but the problem is that it changes in all Divs with the id="resultdo_company". How could I make you change only the id of the clicked event?

I’ll put the html here so I can see the structure

Modal

<div id="calendarModal_calendar2" class="modal fade">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title center">Detalhes da Consulta</h4>
            <button type="button" class="close pull-right" data-dismiss="modal">&times;</button>
         </div>
         <div id="modalBody" class="modal-body">
            <span class="titulo_modal">Título</span>
            <h4 id="modalTitle_excluir" class="modal-title"></h4>
            <span class="titulo_modal">Data e Hora</span>
            <div id="modalWhen_excluir" style="margin-top:5px;"></div>
            <div class="modal-footer">
               <form role="form" id="formId" action="" method="post">
                  <input type="hidden" id="eventID_excluir" name="eventID_excluir"/>
                  <input type="hidden" id="modalTitle_excluirs" name="modalTitle_excluirs"/>
                  <input type="hidden" id="eventID" value="eventID_excluir">
                  <button type="submit"  name="desmarcar" onclick="clicked(event)"  id="desmarcar" class="btn btn-info pull-right"><i class="fas fa-calendar-times"></i> Desmarcar Consulta</button>
                  <input type="submit" name="editar" value="Editar" class="btn btn-info"></input>
                  <button type="submit" class="btn btn-danger" id="deleteButton"><i class="fas fa-trash-alt"></i> Excluir</button>
                  <button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
               </form>
               <form id="id_do_form_faturar" class="formAjax"  method="post" enctype="multipart/form-data">
                  <input type="hidden" name="event_id" id="eventID_faturar_outro"  />
                  <button type="submit" class="btn btn-light btn-sm" style="border:0">Faturar</button>
               </form>
            </div>
         </div>
      </div>
   </div>
</div>

When open the modal I used this $('#id_do_form_faturar').attr('data-formid', event.id); to put the event id clicked on data-formid="", that stays that way

<div id="calendarModal_calendar2" class="modal fade show" style="display: block; padding-right: 17px;">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title center">Detalhes da Consulta</h4>
            <button type="button" class="close pull-right" data-dismiss="modal">×</button>
         </div>
         <div id="modalBody" class="modal-body">
            <span class="titulo_modal">Título</span>
            <h4 id="modalTitle_excluir" class="modal-title">psico - MANOEL ROZENG DA SILVA - MARIA REGINA DURANTE BAESSO</h4>
            <span class="titulo_modal">Data e Hora</span>
            <div id="modalWhen_excluir" style="margin-top:5px;">Segunda-feira, 28 janeiro 2019, 5:00 - 6:00</div>
            <div class="modal-footer">
               <form role="form" id="formId" action="" method="post">
                  <input type="hidden" id="eventID_excluir" name="eventID_excluir" value="1003">
                  <input type="hidden" id="modalTitle_excluirs" name="modalTitle_excluirs">
                  <input type="hidden" id="eventID" value="eventID_excluir">
                  <button type="submit" name="desmarcar" onclick="clicked(event)" id="desmarcar" class="btn btn-info pull-right"><i class="fas fa-calendar-times"></i> Desmarcar Consulta</button>
                  <input type="submit" name="editar" value="Editar" class="btn btn-info">
                  <button type="submit" class="btn btn-danger" id="deleteButton"><i class="fas fa-trash-alt"></i> Excluir</button>
                  <button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
               </form>

               <form id="id_do_form_faturar" class="formAjax" method="post" enctype="multipart/form-data" data-formid="1003">
                  <input type="hidden" name="event_id" id="eventID_faturar_outro" value="1003">
                  <button type="submit" class="btn btn-light btn-sm" style="border:0">Faturar</button>
               </form>
            </div>
         </div>
      </div>
   </div>
</div>

Answer 1

On the line $('#resultado_empresa_').attr('id', 'resultado_empresa_'+event.id); the selector $('#resultado_empresa_') selects all elements whose id is resultado_empresa_.

Without having HTML you can’t know where the target of the intended action is. So I can only guess some scenarios.

Case resultado_empresa_ be the id of the div of fullCalendar, the variable this of the event eventClick(event, jsEvent, view) points to element div event generator. Then you must use:

$(this).attr('id', 'resultado_empresa_' + event.id);

Case resultado_empresa_ is descended from a fullCalendar personalized... ...use .children() case resultado_empresa_ is descended directly from the event generator.

$(this).children('#resultado_empresa_').attr('id', 'resultado_empresa_' + event.id);

...use .find() case resultado_empresa_ does not descend directly from the event generator.

$(this).find('#resultado_empresa_').attr('id', 'resultado_empresa_' + event.id);

Case resultado_empresa_ are many and are spread by HTML I suggest you create a unique custom attribute, and then use this attribute as identifier(attribute created and valued according to your criteria).

$('div[/*Seu identificador*/ = /*Seu critério de identificação*/]').attr('id', 'resultado_empresa_' + event.id);