Remove Styles with "Display None" depending on the logged in user

Question

Wish on this page made in Wordpress make some classes style sum depending on the logged user.

Example: Admin can delete and Upa files so all classes must be active Already the User to classes #cdm_nav_buttons . cdm_nav_buttons should be INACTIVE

<?php
if (!is_user_logged_in()) {
    $url = home_url("login");
    wp_redirect( $url );
    exit;
}

get_header('portal'); ?>

<?php 
  $user = wp_get_current_user();
  if ( in_array( 'author', (array) $user->roles ) ) {
?>

<?php }?>


<style type="text/css">
  #cdm_nav_buttons {
    padding-top: 60px;
  }
  .secSearchCDM {
    display: flex;
    justify-content: flex-end;
  }
  #cdm_nav_buttons a:link, #cdm_nav_buttons a:visited {
   font-family: Helvetica, sans-serif !important;
   font-size: 16px!important;
   border-radius: 50px!important;
   background: 0% 0%/auto auto linear-gradient( 
      229deg, #ef7d00 0%, rgba(239, 125, 0, 0) 100%), #5B61AB!important;
   border: black!important;
   color: white!important;
   padding: 15px 35px!important;
  
  }
  #cdm_nav_buttons a {
    font-family: Helvetica, sans-serif !important;
   font-size: 16px!important;
   border-radius: 50px!important;
   background: 0% 0%/auto auto linear-gradient( 
      229deg, #ef7d00 0%, rgba(239, 125, 0, 0) 100%), #5B61AB!important;
   border: black!important;
   color: white!important;
   padding: 15px 35px!important;
  
  }
  .sp-cdm-search-button {
 font-family: Helvetica, sans-serif !important;
   font-size: 16px!important;
   border-radius: 50px!important;
   background: 0% 0%/auto auto linear-gradient( 
      229deg, #ef7d00 0%, rgba(239, 125, 0, 0) 100%), #5B61AB!important;
   border: black!important;
   color: white!important;
   padding: 15px 35px!important;
  
  }
  a.sp-cdm-search-button {
    font-family: Helvetica, sans-serif !important;
   font-size: 16px!important;
   border-radius: 50px!important;
   background: 0% 0%/auto auto linear-gradient( 
      229deg, #ef7d00 0%, rgba(239, 125, 0, 0) 100%), #5B61AB!important;
   border: black!important;
   color: white!important;
   padding: 1px 17px!important;
  
  }
  #sp_cdm_breadcrumbs span a {
font-family: Helvetica, sans-serif !important;
   font-size: 16px!important;
   margin-left: 5px;
    font-weight: 550;

   color: white!important;
  }
  #sp_cdm_breadcrumbs span {
    background: none!important;
    color: white!important;
  }
  #sp_cdm_breadcrumbs {
   border-radius: 50px!important;
   background: 0% 0%/auto auto linear-gradient( 
      229deg, #ef7d00 0%, rgba(239, 125, 0, 0) 100%), #5B61AB!important;
   border: black!important;
  padding: 12px 20px!important;
  }
  .sp-cdm-rc-folder-title {
    margin: 0px;
    margin-left: 10px;
  }
  .sp-cdm-rc-folder {
    display: flex;
    align-items: center;
  }
  a.cdm-toggle-search{
  font-family: Helvetica, sans-serif !important;
   font-size: 16px!important;
   border-radius: 50px!important;
   background: 0% 0%/auto auto linear-gradient( 
      229deg, #ef7d00 0%, rgba(239, 125, 0, 0) 100%), #5B61AB!important;
   border: black!important;
   color: white!important;
  padding: 5px 20px!important;
  
  }
  #cdm-windows-gui img {
    width: 30px !important;
  }
  .cdm-windows-gui-file-title {
    float: left;
    width: 55%;
    font-size: 18px;
    font-family: Helvetica, sans-serif !important;
}
.sp-cdm-premium-search #search_files {
    max-width: 400px;
    width: 100%;
    border-radius: 7px;
}
#cdm-windows-gui a {
    display: block;
    color: #000;
/*    font-family: Veranda;*/
    text-decoration: none;
    padding: 0px;
    border: 1px solid #FFF;
    border-radius: 3px;
     font-family: Helvetica, sans-serif !important; 
}
.cdm_nav_buttons select{
  border-radius: 7px;
}
#spcdm_batch_plug{
  border-radius: 7px;
}
</style>
<section id="secArchive">
  <div class="container">
    <div class="row">
    <div class="col-12">
        <h1><?php the_title(); ?></h1>
      </div>
      <div class="col-12" style="margin-bottom: 50px;">
      <script>
    jQuery.noConflict();
</script>
        <?php the_content(); ?>
      </div>
    </div>
  </div>
</section>





<?php get_footer('download'); ?>

Answer 1

With php you can assign a date attribute for example data-acesso="2", and with javascript go find this attribute that can be text or number for example if you want to create access levels type nivel 1 - user, nivel 2 - admin, nivel 3 - superadmin. If we use the levels later you can do something like this, demo:

$(document).ready(function(){
//vai buscar o valor (2) ao atributo data-acesso
  var nivelAcesso = $('.nivelUser').data('acesso');
  if(nivelAcesso == '1')
  {
    $('.class2').removeClass('class2');
    $('.class3').removeClass('class3');
  }else if (nivelAcesso == '2')
  {
    $('.class3').removeClass('class3');
  }
  

});

.nivelUser{
background-color: red;
height: 50px;
width: 50px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nivelUser class2 class3" data-acesso="2"> Div random</div>