jQuery: Adding important to an inline style function

I need to add "!important" to a function that adds an inline style however I have a funny feeling that the way the script is done, it won't work, I am hoping someone might shine a light on the issue.

In my jQuery example if I remove

 + ' !important'  

The script works fine however I need to add the important part to override other CSS I don't have access to edit.

HTML

<div class="mobContCon">      <a href="" class="eaContIcon">      Text      <span class="customHex"></span>    </a>      <a href="" class="eaContIcon">      Text      <span class="customHex">#0033ff</span>    </a>      <a href="" class="eaContIcon">      Text      <span class="customHex">#ff00ff</span>    </a>    </div>  

CSS

a.eaContIcon {    height: 40px;    padding: 10px;    background: #ff0000 !important;    margin: 0 1px;    color: #fff;    text-decoration: none;  }    .customHex {    display: none;  }  

jQuery

$(document).ready(function() {      $('.mobContCon a').each(function() {      $(this).addClass('eaContIcon');    });      $('.eaContIcon').css('background', function() {      return $(this).children('.customHex').text() + ' !important';      });    });  

Here is a FIDDLE

https://stackoverflow.com/questions/66978914/jquery-adding-important-to-an-inline-style-function April 07, 2021 at 10:46AM