Django-ckeditor: editor-element-conflict

Question

Django-ckeditor in for loop shows correctly only for the first iteration. For the remaining iterations, the default template form appears as shown below. I see element conflict error in the documentation but it doesn't say anything how to solve. ckeditor.js:21 [CKEDITOR] Error code: editor-element-conflict. Thank you in advance!

Here is my template code 
 <div  class="d-none" id="comment-{{answer.id}}" >
                        {% for comment in answer.comment_set.all %}
                        <div class="card mb-2" >
                            <div class="card-body">
                                <p>{{comment.comment|safe}}</p>
                                <p> <a href="#">{{comment.user.username}}</a> </p>
                            </div>
                        </div>
                        {% endfor %}
                </div>
            
               <div class="d-none" id="commentForm-{{answer.id}}"> 
                {% if user.is_authenticated %}             
                    <div class="commentform">
                    <form method="post">
                        <div class="form-group">
                        {% csrf_token %}
                        {{ commentForm.media }}
                        {{commentForm|crispy}}
                        <input type="hidden" name="answerid" value="{{ answer.id }}">
                        <input type="submit" name="submit" value="Submit" >
                        </div>
                </form>
                </div>
                {% endif %}

Answer 1

I've figured out! It happens because fields have the same ID, and CKEditor gets confused because it finds a few elements with the same ID. Solution: change IDs dynamically when the page is being generated.

I don't know the structure of your model, but I can assume that your form is defined like this:

class CommentForm(forms.ModelForm):
    class Meta:
        model = Comment
        fields = “__all__”

Then you need to change it like this:

from ckeditor.widgets import CKEditorWidget

class CommentForm(forms.ModelForm):
    base_textarea_id = "id_comment"

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.textarea_id_counter = 0
        self.fields['comment'].widget = CKEditorWidget(attrs={'id': self.get_textarea_next_id})

    def get_textarea_next_id(self):
        result = self.base_textarea_id + str(self.textarea_id_counter)
        self.textarea_id_counter += 1
        return result

    class Meta:
        model = Comment
        fields = “__all__”

If I were you, I would make the form variable name using snake case and would change the name of the field "comment" inside the Comment model to something different (even "text" would be better), but it's up to you, of course.