How to modify CSS conic gradient value with JavaScript

I have the following HTML structure that replicates a pie chart:

$('#clickthis').click(function(e){
    e.preventDefault();
  $('.circle-chart').css('background: conic-gradient(green 0% 60%, grey 60% 100%)')
});
.circle-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(green 0% 30%, grey 30% 100%);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*.circle-segment {
  width: 0%;
  height: 0%;
  background-color: grey;
  border-radius: 50%;
}*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="circle-chart">
  <!--<div class="circle-segment"></div>-->
</div>
<button id="clickthis">
Click Me
</button>

The value of the percentage in conic-gradient is coming from a JS variable. So if the value is 30% then:

background: conic-gradient(green 0% 30%, grey 30% 100%);

but if the value is 60% it should be:

background: conic-gradient(green 0% 60%, grey 60% 100%);

How can I update the conic gradient value using JS? The JS I tried is not doing anything and is not giving any error.