jQuery Text Editor doesn't render consistently in responsive page

Question

I am using w3.css for responsive page design. Each size (small, medium, large) has its own distinct (but nearly identical) code, which I will call "sections". Each section has multiple jQuery text editors (JQTEs). When I view the Large page, all the JQTEs render perfectly no problem. When I view the Medium or Small pages (using the browser Developer Tools), the JQTEs display as standard textarea elements, even though when I view the elements with browser developer tools, all the JQTEs have been rendered successfully.

Even when I render the page with the pages first set to Small or Medium, they do not render. I have tried calling $().jqte() with a class, with individual distinct elements, and with $("textarea").jqte() , but still the JQTEs render correctlyt for the Large page only.

The code below is rendered using a loop in ColdFusion, so the #id# values are replaced by actual numeric values.

<!--LARGE-->
<div class="w3-hide-small w3-hide-medium lgdiv#id#" style="display:none">
    <textarea name="lgtext#id#" id="lgtext#id#" class="jqteeditor"></textarea>
</div>
<!--MEDIUM-->
<div class="w3-hide-small w3-hide-large mddiv#id#" style="display:none">
    <textarea name="mdtext#id#" id="mdtext#id#" class="jqteeditor"></textarea>
</div>
<!--SMALL-->
<div class="w3-hide-medium w3-hide-large smdiv#id#" style="display:none">
    <textarea name="smtext#id#" id="smtext#id#" class="jqteeditor"></textarea>
</div>

I render the JQTEs with:

$("textarea").jqte({
    'format': false,
    'fsize': false,
    'color': false,
    'b': true,
    'i': true,
    'u': true,
    'ul': false,
    'ol': false,
    'sub': false,
    'sup': false,
    'outdent': false,
    'indent': false,
    'right': false,
    'center': false,
    'left': false,
    'strike': false,
    'link': false,
    'remove': false,
    'unlink': false,
    'source': false,
    'rule': false
});

or

$(".jqteeditor").jqte({
    'format': false,
    'fsize': false,
    'color': false,
    'b': true,
    'i': true,
    'u': true,
    'ul': false,
    'ol': false,
    'sub': false,
    'sup': false,
    'outdent': false,
    'indent': false,
    'right': false,
    'center': false,
    'left': false,
    'strike': false,
    'link': false,
    'remove': false,
    'unlink': false,
    'source': false,
    'rule': false
});

or for each element individually:

$("#{elementid}").jqte({
    'format': false,
    'fsize': false,
    'color': false,
    'b': true,
    'i': true,
    'u': true,
    'ul': false,
    'ol': false,
    'sub': false,
    'sup': false,
    'outdent': false,
    'indent': false,
    'right': false,
    'center': false,
    'left': false,
    'strike': false,
    'link': false,
    'remove': false,
    'unlink': false,
    'source': false,
    'rule': false
});

where {elementid} corresponds to each id for sm, md, and lg.

Depending on the size, I have buttons that display the div containing the JQTEs:

<div class="w3-hide-small w3-hide-medium">
    <i class="far fa-comment"  onclick="ShowJQTE('lg',#id#)"></i>
</div>
<div class="w3-hide-small w3-hide-large">
    <i class="far fa-comment"  onclick="ShowJQTE('md',#id#)"></i>
</div>
<div class="w3-hide-large w3-hide-medium">
    <i class="far fa-comment"  onclick="ShowJQTE('sm',#id#)"></i>
</div>

where the ShowJQTE just toggles the display of the corresponding div.

How can I get the JQTEs to render consistently on all page sizes?

Answer 1

As it turns out, I had a looping error that caused me to have duplicate text areas. I should also mention that I had to instantiate each jqte individually. Using the class to instantiate multiple text areas did not work.