Running two jquery plugins for the same textarea

Running two jquery plugins for the same textarea

Plugin 1:

https://github.com/aaronrussell/jquery-simply-countable

Plugin 2:


Result:

Issue 1:
I want to add a class to the body when the fullscreeen is active:

  1.      if ( $( "tx-editor" ).has( "expanded" ) ) {
  2.  
  3.      $( "body" ).addClass("test");
  4.      }
However the class test is added regardless if tx editor is expanded or not eg you click the fullscreen icon on the top right of the textarea screen.

The reason I want to have this is becuse the overlay doesn't work like it does in the demo on my work board. When I click the fullscreen icon on my work board it pops out the textarea but the whole window is grayed out. When normally it should all be grayed out but the textarea like in the demo.

I've tried to fix this by editing z-index and opacity but no result. I don't know what css line is causing it to happen on my work board. 

So I thought by adding a class to the body when the overlay is active I can hide the body and make only the popped up textarea show up. 

Issue 2:

Getting the second plugin to run on top of the first plugin or whatever way possible to make the character counter show up. 

Issue 3:

Fixing the js errors that show up in the console when you do inspect element in the fiddle.