I need help figuring out how to make element either appear or hide, based on user status. Normal user = hide element, admin = show element.

I have to do this in Fliplet (unfortunately) and I know not everything can be done in this environment or at least, not easily. This little issue, I have been stuck on for a number of hours. My latest attempt at changing it looks like this (plus associated HTML and CSS):

JS

Fliplet.User.getCachedSession().then(function(session) {

var user = _.get(session, 'entries.saml2.user');
  var typeColumn = 'Admin'; //the name of the column in the data source

if (user === 'admin1(changed ofcourse)' || user === 'admin2(changed ofcourse)') {
    $('.adminlink').fadeIn(400, function() {
      document.getElementsByClassName("adminlink").style.display='block';
    }
      );
  } else {
    $('.adminlink').fadeOut(1, function() {
      document.getElementsByClassName("adminlink").style.display='none';
    }
      );
  }
});

CSS

.adminlink {
  display: none !important;
  width: 100%;
}

HTML

<div class="adminlink" id="admin">
  <fl-container cid="xxxxx">
    <fl-list-small-thumbs cid="xxxxx"></fl-list-small-thumbs>
  </fl-container>
</div>

I have of course tried initially following guides and code snippets from Fliplet's own knowledge based but they just never worked.

I tried different JS approaches to this and even CSS changes, but nothing seems to work. The element, for some reason, doesn't want to respond, no matter how its called i.e. by id, class etc.

ANY ideas, will be appreciated!

Thank you Greg

EDIT: This approach uses office 365 integrated login (works fine), however initially there was a Fliplet's based login system (different code in JS) and while still was working fine, the hiding/showing of elements didn't work either.