jQuery : Change var when clicking

I have a circular progress bar and want to update it (and its span with the values) when clicking on a div. The click should add the value of an input to a var. I have created a small preview of this. My problem is the var doesn't seem to change when clicking. Can anyone help? Thanks!

var calories = 1000;
var total = 2500;
var percentage = calories / total;
var pluscal = $('#quantity').val();
var span = $('#today-progress span').html(calories + '/' + total);


/* setInterval(() => {
  calories = 0
}, 1000 * 60 * 60 * 24);
var today = new Date().getTime();
localStorage.setItem("today", today); */


$('#confirm-svg').click(function() {
  calories = calories + pluscal;
  $('#today-progress').circleProgress();
});


$('#today-progress').circleProgress({
  value: percentage,
  size: 300.0,
  startAngle: -1.57,
  thickness: 'auto',
  fill: {
    gradient: ['#CE6363', '#B23939'],
  },
  emptyFill: '#D6A0A0',
  animation: {
    duration: 3000,
    easing: 'circleProgressEasing'
  },
  animationStartValue: 0.0,
  reverse: false,
  lineCap: 'round',
});

body {
  font-family: Helvetica, sans-serif;
}

#today-progress {
  z-index: 0;
  position: relative;
  top: 10px;
  text-align: center;
}

#today-progress span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 45px;
}

svg {
  width: 30px;
  height: 30px;
  margin: 5px 10px;
  float: right;
  fill: #000;
}

svg:active {
  fill: red;
}

form {
  margin-top: 20px;
  margin-left: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.2/dist/circle-progress.js"></script>
<div id="today-progress">
  <span></span>
</div>

<form>
  Quantity (between 1 and 1000):
  <input type="number" id="quantity" min="1" max="1000">
</form>

<div id="confirm-svg">
  <svg id="confirm-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 305.002 305.002" style="enable-background:new 0 0 305.002 305.002;"
  xml:space="preserve">
    <g>
      <g>
        <path d="M152.502,0.001C68.412,0.001,0,68.412,0,152.501s68.412,152.5,152.502,152.5c84.089,0,152.5-68.411,152.5-152.5    S236.591,0.001,152.502,0.001z M152.502,280.001C82.197,280.001,25,222.806,25,152.501c0-70.304,57.197-127.5,127.502-127.5    c70.304,0,127.5,57.196,127.5,127.5C280.002,222.806,222.806,280.001,152.502,280.001z"
        />
        <path d="M218.473,93.97l-90.546,90.547l-41.398-41.398c-4.882-4.881-12.796-4.881-17.678,0c-4.881,4.882-4.881,12.796,0,17.678    l50.237,50.237c2.441,2.44,5.64,3.661,8.839,3.661c3.199,0,6.398-1.221,8.839-3.661l99.385-99.385    c4.881-4.882,4.881-12.796,0-17.678C231.269,89.089,223.354,89.089,218.473,93.97z"
        />
      </g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
  </svg>
</div>

(JSFiddle here) Also, if it's possible I'd like to reset this var (calories) to 0 every 24 hours, you can see my pitiful attempt at this in a comment in js code.. If you can help me with that, it would be awesome too :)

Solution

You have to update the variables that were declared at the top every time you click the submit checkmark button.

Also, you should parseInt the value from the input box and you should call circleProgress() with all the settings necessary to redraw the circle stuff. The way you have right now, there are no settings.

Something like the following to get you started: See JSFiddle here

$('#confirm-svg').click(function() {
  // Every time you click, you should parse the integer from the input,
  // then add that to the sum of calories.
  calories = calories + parseInt($('#quantity').val(), 10);
  percentage = calories / total; 

  // Then you have to update the calories mark with the new value of calories
  $('#today-progress span').html(calories + '/' + total);
  // Then you have to redraw the circle stuff
  drawCircle()
});

function drawCircle() {
  $('#today-progress').circleProgress({
    value: percentage,
    size: 300.0,
    startAngle: -1.57,
    thickness: 'auto',
    fill: {
      gradient: ['#CE6363', '#B23939'],
    },
    emptyFill: '#D6A0A0',
    animation: {
      duration: 3000,
      easing: 'circleProgressEasing'
    },
    animationStartValue: 0.0,
    reverse: false,
    lineCap: 'round',
  });
}

// Draw the initial circle
drawCircle();