bootstrap-input-spinner | Bootstrap 4 / jQuery plugin | Frontend Framework library

I'm trying to make an item card for a web shop that sels food. What I'm trying to do is that on the first click on the button with the cart icon the amout of item is increased by +1 (now it is increasing by steps that I have set on input element). But I also want it to increase the value (weight/amount) of the product by the step that is defined on the input value and the cart icon has to change to the plus icon (That I managed to do). And for the minus button the logic is reversed... so i click the - button the value/weight goes down and amount goes down and if it reaches 0 they should dissaper.

EXAMPLE: I click the cart icon the amount increases to 1 and value/weight increases to 0.25kg... if I click the cart button again the amount goes to 2 and weight increases to 0.5kg. Now if I click the - button the amount goes down to 1 and weight to 0.25kg and if I click it again the amount should go to 0 and weight to 0 and the button wit - icon and the input field should disappear.

MY PROBLEMS:

1. My first problem is that I cant manage to set the amount to increase by 1 and value/weight by the defined step
2. My second problem is that my code keeps hiding the [-] button and input field on every click not when it reaches 0
3. Is this approach even correct or have I overcomplicated the thing I'm trying to do? Is there an easier solution to this?

I'm providing the jsfiddle in this link so that you can have a loot at my code and hopefully understand and help me out with a couple of my problems...

My HTML layout: