Why is my $().attr() not working?

Here is my html code which is a circular progress bar that has a attribute data-progress:

<div style="padding-left:10px" class="tox-progress" data-size="120" id="solowinrankcircle" data-thickness="8" data-color="blue" data-background="aqua" data-progress="77" data-speed="500">
                            <div class="tox-progress-content" data-vcenter="true">
                                <p style="padding-left:40px;padding-top:10px;" id="solokillrank">1234</p>
                            </div>
                        </div>


$("#solowinrankcircle").attr('data-progress', '2');

I have tried this too as suggested

$("#solowinrankcircle").prop('data-progress','2');

It does not seem to working no matter what I do. When I change it using the html code it works but not using jquery. Any suggestions?