Erreur JavaScript, pour ouvrir une balise form.

Bonjour,à tous, J'ai un système de commentaire que je souhaite si un utilisateur souhaite editer son commentaire mais ca ne fonctionne pas, mais je n'y comprend pas pourquoi ce ne veux pas. dessus quand je clique sur editer normalement cela devrait m'ouvrir juste la ou je veux modifier, mais la quand je clique ca m'ouvre une autre textarea.

 <a href="#" class="editer" data-rel="<?= $data['id'] ?>" title="Editer mon message">
                                        <i class="fas fa-edit"></i> Editer
                                    </a>
                                    |
                                    <a href="#" class="supprimer" id="supprimer" title="Supprimer mon message">
                                        <i class="far fa-trash-alt"></i> Supprimer
                                    </a>
                                    </div>
                                    <?php
                                    }
                                    ?> 
                                    </div>
<p class="commentaire_publish_<?= $data['id'] ?>"><?= $data['commentaire']?>
                                    </p>
                                    
                                    
                                    
                                    
                                    <!------ EDIT COMMENTS input and button put --->
                                <form method="post" action="" class="form_edit_commentaire_<?= $data['id'] ?>" id="form_comment" style="display:none;">
                                <div class="row">
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <div class="form-group">
 <textarea class="form-control textarea" type="textarea" id="edit_commentaire" maxlength="1000" name="edit_commentaire" rows="5" placeholder="Entrez votre commentaire ici <?= $user['pseudo']?>." required=""><?php if($mode_edition == 1) { ?><?= $data['commentaire'] ?><?php } ?></textarea>
  <input type="hidden" id="id" name="id" value="<?= htmlspecialchars($_GET['id']) ?>" >
<input type="hidden" id="token_comment" name="token_comment" value="<?= $data['id'] ?>" >
                                            <!------ $_GET['id] FOR AJAX ----->
                                            <div class="the-count">
 <span id="current">0</span><span id="maximum">/1000</span>
                                            </div>
                                        </div>
<button type="submit" name="submit_commentaire" class="btn btn-primary btn abt-btn col-md-12" id="btn_edit">Mettre à jour
                                            <button class="loader loader--style6 btn btn-primary col-md-12" aria-hidden="true" style="display:none;" disabled="true" id="loader_edit">
                                              <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
                                                <rect x="0" y="13" width="4" height="5" fill="#333">
                                                  <animate attributeName="height" attributeType="XML"
                                                    values="5;21;5" 
                                                    begin="0s" dur="0.6s" repeatCount="indefinite" />
                                                  <animate attributeName="y" attributeType="XML"
                                                    values="13; 5; 13"
                                                    begin="0s" dur="0.6s" repeatCount="indefinite" />
                                                </rect>
                                                <rect x="10" y="13" width="4" height="5" fill="#333">
                                                  <animate attributeName="height" attributeType="XML"
                                                    values="5;21;5" 
                                                    begin="0.15s" dur="0.6s" repeatCount="indefinite" />
                                                  <animate attributeName="y" attributeType="XML"
                                                    values="13; 5; 13"
                                                    begin="0.15s" dur="0.6s" repeatCount="indefinite" />
                                                </rect>
                                                <rect x="20" y="13" width="4" height="5" fill="#333">
                                                  <animate attributeName="height" attributeType="XML"
                                                    values="5;21;5" 
                                                    begin="0.3s" dur="0.6s" repeatCount="indefinite" />
                                                  <animate attributeName="y" attributeType="XML"
                                                    values="13; 5; 13"
                                                    begin="0.3s" dur="0.6s" repeatCount="indefinite" />
                                                </rect>
                                              </svg>
                                            </button>
                                        </button>
                                    </div>
                                </div>
                            </form>

et en js j'ai fais cela:

$('.editer').click(function(e) {
    var id = $(this).attr('data-rel');
    e.preventDefault()
    $('#comment_pub_' + id).fadeOut('fast', function() {
        $('#form_comment_'+id).fadeIn('fast', function() {
            $(this).find('.textarea').focus()
        })
    })
    return false
});

Modifié par Alpha_dev (28 Nov 2020 - 14:41)