jQuery selector is wrong on removeAttr

I try to remove all ids from a certain class, then to put id on a new element on click on a link that has a class but it's not working.

The add of the new id seems to work but the removing of all ids before adding this new id is not working.

This is my code :

$(".response").click(function () {
//    $('.responsediv').find("input[type=text], textarea").val("");
    $('.blogcommentresponse-form').removeAttr('id')
    $(".responsediv").fadeOut();
    $(this).parents("div").next(".responsediv").css("visibility", "").fadeIn(100);
    $(this).parents("div").next(".responsediv").closest(".blogcommentresponse-form").attr('id','blogcommentresponse-form');
});

It works fine for adding id to the new form element but not for removing id of all others forms.

Maybe I'm thinking the click function does not work with the selector of a class that is outside of this selector.

The code where it should apply on my blog:

<div class="comments">
  <div class="u-heading-v3-1 g-mb-5">
    <h2 class="h3 u-heading-v3__title g-brd-primary  no-padding-b">
      Commentaires sur cet article
    </h2>
  </div>
  <div class="media g-mb-20"> <img loading="lazy" class="d-flex g-width-60 g-height-60 rounded-circle g-mt-3 g-mr-20" src="assets/img/team/face-6.png" alt="">
    <div class="media-body u-shadow-v22 g-bg-secondary g-rounded-5 g-pa-10">
      <div class="d-flex align-items-start g-mb-15 g-mb-10--sm">
        <div class="d-block">
          <h5 class="h6 g-color-black g-font-weight-600">Gérard Ricard</h5> <span class="d-block g-color-gray-dark-v5 g-font-size-11">15 janvier 2022 à 00:05</span>
        </div>
        <div class="ml-auto"> <a class="u-link-v5 g-color-black g-color-blue--hover g-font-weight-600 g-font-size-12 text-uppercase response" style="cursor:pointer">Répondre</a> </div>
      </div>
      <p>Bonjour, que préconisez-vous pour le renforcement de vieux murs en bauges ?
        Par avance merci </p>
      <ul class="list-inline my-0 pull-right">
        <li class="list-inline-item rating">
          Note :
          <i class="fa fa-star" style="color:#4765a0;font-size: 14px"></i><i class="fa fa-star" style="color:#4765a0;font-size: 14px"></i><i class="fa fa-star" style="color:#4765a0;font-size: 14px"></i><i class="fa fa-star" style="color:#4765a0;font-size: 14px"></i><i class="fa fa-star" style="color:#4765a0;font-size: 14px"></i>
        </li>
      </ul>
    </div>
  </div>
  <div class="responsediv row" style="display:none">
    <div class="col-md-2 text-left"></div>
    <div class="respondform col-md-9">
      <div class="u-heading-v3-1 g-mb-5">
        <h3 class="h3 u-heading-v3__title g-brd-primary  no-padding-b">
          Publier une réponse au commentaire de Gérard Ricard
        </h3>
      </div>
      <form action="plugins/skyforms/blog-comment-response-process.php" method="post" class="blogcommentresponse-form sky-form comment-style" novalidate="novalidate"> <input type="hidden" name="id_article" value="103"> <input type="hidden" name="face_id" value="4"> <input type="hidden" name="id_comment" value="119">
        <fieldset>
          <div class="row">
            <div class="bon_blog_commentresponse_box form-group col-lg-6 g-mb-10"> <input type="hidden" name="blogcommentresponse"> <label class="g-mb-10" for="bon_blog_commentresponse_name">Votre nom :</label> <input class="form-control g-bg-gray-light-v5 g-bg-gray-light-v5--focus g-brd-gray-light-v5 g-rounded-1 g-pa-10" placeholder="Nom ou Pseudo" type="text" name="nom_blog_commentresponse" required=""> </div>
            <div class="bon_blog_commentresponse_box form-group col-lg-6 g-mb-10"> <label class="g-mb-10" for="bon_blog_commentresponse_email">Votre e-mail :</label> <input class="form-control g-bg-gray-light-v5 g-bg-gray-light-v5--focus g-brd-gray-light-v5 g-rounded-1 g-pa-10" placeholder="Adresse e-mail" type="email" name="email_blog_commentresponse" required=""> </div>
          </div>
          <div class="form-group g-mb-20"> <label class="g-mb-5" for="commentaire_blog_commentresponse">Votre commentaire :</label> <textarea class="countit form-control rounded-0 form-control-md w-100 faq-form g-bg-gray-light-v5 g-bg-gray-light-v5--focus g-brd-gray-light-v5 g-rounded-1 g-pa-10" name="commentaire_blog_commentresponse" rows="5" placeholder="Tapez votre commentaire ici" minlength="30" maxlength="500" required=""></textarea>
            Caractères restant : <span class="counter_desc">500 caractères</span> </div>
          <p><button type="submit" class="btn w-100 u-btn-primary text-center"><i class="fa fa-send"></i> Envoyer votre commentaire</button></p>
        </fieldset>
      </form>
      <div class="row">
        <div class="bon-blogcommentresponse-success g-mb-20"></div>
        <div class="message-blogcommentresponse message alert alert-dismissible fade show g-bg-teal g-color-white rounded-0 w-100" role="alert"> <button type="button" class="close u-alert-close--light" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
          <div class="media"> <span class="d-flex g-mr-10 g-mt-5"> <i class="icon-check g-font-size-25"></i> </span> <span class="media-body align-self-center"> <strong>Terminé !</strong> Votre réponse a bien été envoyée. Elle est en attente de modération.
            </span> </div>
        </div>
        <div class="error-blogcommentresponse message error alert alert-dismissible fade show g-bg-yellow rounded-0 w-100" role="alert"> <button type="button" class="close u-alert-close--light" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
          <div class="media"> <span class="d-flex g-mr-10 g-mt-5"> <i class="icon-info g-font-size-25"></i> </span> <span class="media-body align-self-center"> <strong>Attention !</strong> A cause d'une erreur technique, le commentaire n'a pas pu être envoyé. Veuillez recommencer plus tard.
            </span> </div>
        </div>
      </div>
    </div>
    <div class="col-md-1 text-left"><br> <span style="cursor:pointer ;color:#000000 !important" class="annulereponse">X</span> </div>
  </div>
  <div class="media  g-brd-gray-light-v4 g-ml-40 g-mb-30"> <img loading="lazy" class="d-flex g-width-60 g-height-60 rounded-circle g-mt-3 g-mr-15" src="assets/img/team/face-99.png" alt="">
    <div class="media-body u-shadow-v22 g-bg-secondary g-rounded-5 g-pa-10">
      <div class="d-flex align-items-start g-mb-15 g-mb-10--sm">
        <div class="d-block">
          <h5 class="h6 g-color-black g-font-weight-600">Stan Piotrowski</h5> <span class="d-block g-color-gray-dark-v5 g-font-size-11">16 janvier 2022 à 21:27</span>
        </div>
      </div>
      <p>Bonjour,
        l'idéal est d'utiliser des croix de chaînages reliées avec des tirants. Toutefois vous pouvez aussi réaliser un chaînage traditionnel avec une structure armée. Veillez a bien utiliser un mortier de scellement à retrait compensé afin de s'adapter aux propriétés de dilatation de la terre.</p>
    </div>
  </div>
  <div class="media g-mb-20"> <img loading="lazy" class="d-flex g-width-60 g-height-60 rounded-circle g-mt-3 g-mr-20" src="assets/img/team/face-5.png" alt="">
    <div class="media-body u-shadow-v22 g-bg-secondary g-rounded-5 g-pa-10">
      <div class="d-flex align-items-start g-mb-15 g-mb-10--sm">
        <div class="d-block">
          <h5 class="h6 g-color-black g-font-weight-600">Smith</h5> <span class="d-block g-color-gray-dark-v5 g-font-size-11">14 janvier 2022 à 08:02</span>
        </div>
        <div class="ml-auto"> <a class="u-link-v5 g-color-black g-color-blue--hover g-font-weight-600 g-font-size-12 text-uppercase response" style="cursor:pointer">Répondre</a> </div>
      </div>
      <p>Bonjour,
        dans quelle mesure est-il possible de faire un traitement étanchéité sur des murs semi-enterrés ?
      </p>
      <ul class="list-inline my-0 pull-right">
        <li class="list-inline-item rating">
          Note :
          <i class="fa fa-star" style="color:#4765a0;font-size: 14px"></i><i class="fa fa-star" style="color:#4765a0;font-size: 14px"></i><i class="fa fa-star" style="color:#4765a0;font-size: 14px"></i><i class="fa fa-star" style="color:#4765a0;font-size: 14px"></i><i class="fa fa-star" style="color:#4765a0;font-size: 14px"></i>
        </li>
      </ul>
    </div>
  </div>
  <div class="responsediv row" style="display:none">
    <div class="col-md-2 text-left"></div>
    <div class="respondform col-md-9">
      <div class="u-heading-v3-1 g-mb-5">
        <h3 class="h3 u-heading-v3__title g-brd-primary  no-padding-b">
          Publier une réponse au commentaire de Smith
        </h3>
      </div>
      <form action="plugins/skyforms/blog-comment-response-process.php" method="post" class="blogcommentresponse-form sky-form comment-style" novalidate="novalidate"> <input type="hidden" name="id_article" value="103"> <input type="hidden" name="face_id" value="4"> <input type="hidden" name="id_comment" value="117">
        <fieldset>
          <div class="row">
            <div class="bon_blog_commentresponse_box form-group col-lg-6 g-mb-10"> <input type="hidden" name="blogcommentresponse"> <label class="g-mb-10" for="bon_blog_commentresponse_name">Votre nom :</label> <input class="form-control g-bg-gray-light-v5 g-bg-gray-light-v5--focus g-brd-gray-light-v5 g-rounded-1 g-pa-10" placeholder="Nom ou Pseudo" type="text" name="nom_blog_commentresponse" required=""> </div>
            <div class="bon_blog_commentresponse_box form-group col-lg-6 g-mb-10"> <label class="g-mb-10" for="bon_blog_commentresponse_email">Votre e-mail :</label> <input class="form-control g-bg-gray-light-v5 g-bg-gray-light-v5--focus g-brd-gray-light-v5 g-rounded-1 g-pa-10" placeholder="Adresse e-mail" type="email" name="email_blog_commentresponse" required=""> </div>
          </div>
          <div class="form-group g-mb-20"> <label class="g-mb-5" for="commentaire_blog_commentresponse">Votre commentaire :</label> <textarea class="countit form-control rounded-0 form-control-md w-100 faq-form g-bg-gray-light-v5 g-bg-gray-light-v5--focus g-brd-gray-light-v5 g-rounded-1 g-pa-10" name="commentaire_blog_commentresponse" rows="5" placeholder="Tapez votre commentaire ici" minlength="30" maxlength="500" required=""></textarea>
            Caractères restant : <span class="counter_desc">500 caractères</span> </div>
          <p><button type="submit" class="btn w-100 u-btn-primary text-center"><i class="fa fa-send"></i> Envoyer votre commentaire</button></p>
        </fieldset>
      </form>
      <div class="row">
        <div class="bon-blogcommentresponse-success g-mb-20"></div>
        <div class="message-blogcommentresponse message alert alert-dismissible fade show g-bg-teal g-color-white rounded-0 w-100" role="alert"> <button type="button" class="close u-alert-close--light" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
          <div class="media"> <span class="d-flex g-mr-10 g-mt-5"> <i class="icon-check g-font-size-25"></i> </span> <span class="media-body align-self-center"> <strong>Terminé !</strong> Votre réponse a bien été envoyée. Elle est en attente de modération.
            </span> </div>
        </div>
        <div class="error-blogcommentresponse message error alert alert-dismissible fade show g-bg-yellow rounded-0 w-100" role="alert"> <button type="button" class="close u-alert-close--light" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
          <div class="media"> <span class="d-flex g-mr-10 g-mt-5"> <i class="icon-info g-font-size-25"></i> </span> <span class="media-body align-self-center"> <strong>Attention !</strong> A cause d'une erreur technique, le commentaire n'a pas pu être envoyé. Veuillez recommencer plus tard.
            </span> </div>
        </div>
      </div>
    </div>
    <div class="col-md-1 text-left"><br> <span style="cursor:pointer ;color:#000000 !important" class="annulereponse">X</span> </div>
  </div>
  <div class="media  g-brd-gray-light-v4 g-ml-40 g-mb-30"> <img loading="lazy" class="d-flex g-width-60 g-height-60 rounded-circle g-mt-3 g-mr-15" src="assets/img/team/face-99.png" alt="">
    <div class="media-body u-shadow-v22 g-bg-secondary g-rounded-5 g-pa-10">
      <div class="d-flex align-items-start g-mb-15 g-mb-10--sm">
        <div class="d-block">
          <h5 class="h6 g-color-black g-font-weight-600">Stan Piotrowski</h5> <span class="d-block g-color-gray-dark-v5 g-font-size-11">14 janvier 2022 à 17:00</span>
        </div>
      </div>
      <p>Bonjour, il existe toutes sortes de procédés pour le traitement des parties enterrées : cuvelage, drainage, revêtement bitumineux. Tout dépend de la configuration de votre maison ainsi que du type d'infiltrations que vous avez.
        Bien cordialement, l'équipe SP-BATIMENT</p>
    </div>
  </div>
</div>

Any kind of advice will be much appreciated.

I think you maybe mixed up your question a little - your code removes the ids fine, but it does not add them. Here's a JSFiddle of your code - I added an id to each form so you can see what happens. Clicking the links removes the ids fine, but adding an id does not work.

Adding wasn't working simply because you're traversing in the wrong direction. You're using .closest() on the matched .responsediv, but that searches its ancestors up through the DOM. The .blogcommentresponse-form that you're searching for is a child of .responsediv, so you need to search down through its descendants. You can do that with .find().

Working snippet:

$(".response").click(function () {
    $('.blogcommentresponse-form').removeAttr('id')
    $(".responsediv").fadeOut();
    $(this).parents("div").next(".responsediv").css("visibility", "").fadeIn(100);

    // Changed .closest() to .find() here
    $(this).parents("div").next(".responsediv")
        .find(".blogcommentresponse-form")
        .attr('id','blogcommentresponse-form');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="comments">
    
  <div class="media">
    <div class="media-body">
      <div>
        <div class="ml-auto">
            <!-- LINK 1 ################################################### -->
            <a class="response">Répondre</a>
        </div>
      </div>
      <p>Bonjour, que préconisez-vous pour le renforcement de vieux murs en bauges ? Par avance merci </p>
    </div>
  </div>

  <div class="responsediv" style="display:none">
    <div class="respondform">
      <!-- FORM 1 ################################################### -->
      <!-- Give form an ID so we can check if it is removed/updated -->
      <form class="blogcommentresponse-form" id="form-1">Form 1</form>
    </div>
  </div>

  <div class="media"></div>

  <div class="media">
    <div class="media-body">
      <div>
        <div class="ml-auto">
            <!-- LINK 2 ################################################### -->
            <a class="response">Répondre 2</a>
        </div>
      </div>
      <p>Bonjour, dans quelle mesure est-il possible de faire un traitement étanchéité sur des murs semi-enterrés ?</p>
    </div>
  </div>

  <div class="responsediv" style="display:none">
    <div class="respondform">
      <!-- FORM 2 ################################################### -->
      <!-- Give form an ID so we can check if it is removed/updated -->
      <form class="blogcommentresponse-form" id="form-2">Form 2</form>
    </div>
  </div>

  <div class="media"></div>

</div>

Side note 1: Please try to make a minimal, complete, and verifiable example when posting a question. 90% of the time I spent on this question was simply trying to get down to the basic structure of your HTML. The code you've added so cluttered with CSS classes and unrelated HTML that it obscures what we - and you! - really need to see and focus on to get a feeling for the problem. The snippet I added is what I boiled it down to; starting from something like that the problem is almost immediately obvious.

Side note 2: as already pointed out in the comments, dynamic IDs seem semantically like the wrong appoach. IDs are supposed to be unique, specific elements, not something that changes. I'd suggest maybe using a class, eg .active, to identify the "active" form.

Side note 3: I'm not sure how much control you have over the HTML, maybe it is autogenerated by a plugin, but this is much harder, and IMO more brittle and liable to break, because the semantically related element groups are not grouped together under a parent. If each link and form were nested in a parent element, this would be much easier, and less likely to break if elements are changed or moved around in some future updates. Eg:

<div class="comment">
    <div class="media">
        <a class="response"></a>
    </div>

    <div class="responsediv">
       <form class="blogcommentresponse-form"></form>
    </div>
</div>

Now the code to find the form is simple:

$('.response').on('click', function() {
    // Find the form
    $(this).closest('.comment').find('.blogcommentresponse-form')...