Не получается заполнить поле ввода сообщения именем того, на чей комментарий идёт ответ javascript

Работаю над комментариями и их вложенностью на django, с этим проблем нет, всё работает. Но при нажатии кнопки Ответить надо чтобы в поле ввода сообщения автоматически прописывалось имя того, на чей комментарий идёт ответ. Это все можно реализовать на javascript в котором я ничего не понимаю... Есть функция, которую я применяю, но она не отрабатывает должным образом:

<script>
    function addComment(name, id) {
        document.getElementById("contactparent").value = id;
        document.getElementById("contactcomment").innerText = `${name}, `;
    }
</script>

Ну и соответственно код html:

<div class="comments-area">
    <h4>{{ post.get_comments.count }} Комментариев</h4>
    {% for comment in post.get_comments %}
        <div class="comment-list">
            <div class="single-comment justify-content-between d-flex">
                <div class="user justify-content-between d-flex">
                    <div class="desc">
                        <h5><a href="#">{{ comment.name }}</a></h5>
                        <p class="date">{{ comment.created_at }} </p>
                        <p class="comment">{{ comment.message }}</p>
                    </div>
                </div>
                <div class="reply-btn">
                    <a href="#formContact" onclick="addComment('{{ comment.name }}', '{{ comment.id}}')" class="btn-reply text-uppercase">Ответить</a> 
                </div>
            </div>
        </div>
        {% for child_comment in comment.comment_set.all %}  
            <div class="comment-list left-padding">
                <div class="single-comment justify-content-between d-flex">
                    <div class="user justify-content-between d-flex">
                        <div class="desc">
                            <h5><a href="#">{{ child_comment.name }}</a></h5>
                            <p class="date">{{ child_comment.created_at }} </p>
                            <p class="comment">{{ child_comment.message }}</p>
                        </div>
                    </div>
                    <div class="reply-btn">
                        <a href="" class="btn-reply text-uppercase">Ответить</a> 
                    </div>
                </div>
            </div>
        {% endfor %}    
    {% endfor %}                                                            
</div>
<div class="comment-form">
    <h4>Оставьте комментарий</h4>
    <form action="{% url 'add_comment' pk=post.id %}" method="post" id="formContact">
        {% csrf_token %}
        <input type="hidden" name="parent" id="contactparent" value="">
        <div class="form-group form-inline">                            
            <div class="form-group col-lg-6 col-md-6 name">
                <label for="contactname"></label> 
                {{ form.name }}
            </div>
            <div class="form-group col-lg-6 col-md-6 email">
               <label for="contactemail"></label>
               {{ form.email }}
            </div>
        </div>
        <div class="form-group">
        <label for="contactcomment"></label>
            {{ form.message }}
        </div>
        <button type="submit" class="primary-btn submit_btn">Отправить</button> 
    </form>
</div>

Как автоматически заполнить поле ввода сообщения именем того, на чей комментарий идёт ответ с помощью функции javascript?

Вернуться на верх