Collapse-O-Matic Highlander disappears when visual editor opened

Hello,

I am having an issue with the highlander grouping. Everything works great, as long as I stay in the text editor, but if I open the visual editor for the page, the highlander grouping disappears. This is just a problem if a user accidentally opens the visual editor.

This is the code that I have got….

<div id="elm1" class="collapseomatic snap-shut" title="1" rel="writing-highlander">title 1</div>
<div id="elm2" class="collapseomatic snap-shut" title="2" rel="writing-highlander">title 2</div>
<div id="elm3" class="collapseomatic snap-shut" title="3" rel="writing-highlander">title 3</div>

<div id="target-elm1" class="collapseomatic_content">
content 1</div>
<div id="target-elm2" class="collapseomatic_content">
content 2</div>
<div id="target-elm3" class="collapseomatic_content">
content 3</div>

And after I open the visual editor it goes to…

<div id="elm1" class="collapseomatic snap-shut" title="1">title 1</div>
<div id="elm2" class="collapseomatic snap-shut" title="2">title 2</div>
<div id="elm3" class="collapseomatic snap-shut" title="3">title 3</div>

I bought the Collapse-O-Matic Commander plugin to see if I could fix it that way, but I can’t seem figure out how to use the short code when the title and content are separated with the roll-your-own method I’m using.

Any tips for a fix, whether with the Collapse-O-Matic Commander plugin or without would be greatly appreciated.

Thanks in advance.

https://www.ads-software.com/plugins/jquery-collapse-o-matic/