$('#new-1').attr('data-count', 5);
Solution 1 :
Solution 2 :
If you check JQuery’s documentation on this link
it clearly states
Using the data() method to update data does not affect attributes in the DOM. To set a data-* attribute value, use attr.
Hence you should use the .attr("key", value); function.
The code would be
$('#new-1').attr('data-count', 5);
Problem :
I’m using a data attribute in my css however when I change it via jquery it’s not changing on screen on in the dom.
$('#new-1').data('count', 5);.fa-stack[data-count]:after {
position: absolute;
right: -20%;
top: -20%;
content: attr(data-count);
font-size: 90%;
padding: .4em;
border-radius: 999px;
line-height: .75em;
color: white;
background: rgba(255, 0, 0, 1);
text-align: center;
min-width: 1.5em;
font-weight: bold;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="new-1" class="fa-stack fa has-badge" data-count="0">
<i class="fa fa-user-circle fa-stack-1x"></i>
</span>Comments
Comment posted by Change CSS value dynamically with jQuery
Does this answer your question?