Mulitple summernote instances

I have a web page were I have multiple summernote instances in it.

I have 4 textareas with different ids. I run

$("textarea").each(function () {
            $(this).summernote({
                height: 240,
                toolbar: [
                    ['font', ['bold', 'underline', 'clear']],
                    ['para', ['ul', 'ol']],
                    ['insert', ['link']],
                    ['view', ['help']]
                ]
            });
        });

code to convert textareas to summernote instances.

Now I want to access code of a specific one. How to do so?

For further information my backend is django and textarea's are generated by multiple forms. The only difference is the form I have will not send the request to the backend using a regular html form. Instead I'm trying to send the request using axios.

Note when I try to access textarea's value using it's id:

let description = $("#{{ form_invoice.description.auto_id }}").val();

or

let description2 = $("#{{ form_brand.description.auto_id }}").val();

I always get the first form's description on the page.

Since I have multiple forms created by Django and all forms has description fields all auto_ids will be id_description.

The problem is summernote overrides the textarea and inspect element does not clearly show the problem where I have multiple elements with the same id on the page.

Solution:

Adding prefixes to each form when creating the form in view.

form_brand = BrandsForm(prefix="brand")
form_invoice = InvoicesForm(prefix="invoice")

Now these two forms description field has different ids.

Back to Top