Как привязать поле количество из плагина к зубу (svg), чтобы при нажатии на зуб изменялось количество +1?

Может не туда пишу, но помогите пожалуйста. На сайте wordpress делаю калькулятор на плагине Cost Calculator. Но я решила привязать изображение svg с зубами и чтобы при нажатии можно было выделить зуб красным, а так же снять выделение и выбрать много зубов. Вот код который я нашла и использую.

<script>  
    const map = document.querySelector('.svg_tooth'); 
    const states = map.querySelectorAll('.state'); 
 
    states.forEach(function(state, i) { 
        state.addEventListener('click', function(e) { 
            let current = e.currentTarget; 
            // reset all prevously clicked except the current state 
            reset_colors(current); 
            current.classList.toggle('on'); 
        }) 
    }) 
    function reset_colors(exclude) { 
        const activeStates = map.querySelectorAll('.on'); 
    } 
</script>

Css:

svg {
 
  display: block;
 
  height: 55vmin;
 
}
  
.state {
 
  cursor: pointer;
 
}
  
.state.on {
 
  fill: red;
 
}

Все работает хорошо. Сначала я хотела привязать поле к чекбоксам к каждому зубу, но решила упростить и просто взяла поле с количеством. Суть вопроса: Как привязать поле количество из плагина к зубу (svg), чтобы при нажатии на зуб изменялось количество +1, а при снятии выделения -1? Пробовала описанные примеры с кнопками не получается. При нажатии ничего не изменяется. Вот так выведено поле с количеством:

<div class="calc-input-wrapper ccb-field calc_quantity_field_id_2"><input name="quantityField" type="text" placeholder="0" class="calc-input number ccb-field vertical" style="color: rgb(0, 0, 0); margin: 0px; padding: 17px 15px; font-size: 14px; text-align: left; font-style: normal; font-weight: 400; text-shadow: rgba(255, 255, 255, 0) 0px 0px 0px; border-width: 1px; border-style: solid; border-color: rgb(208, 208, 208); border-radius: 0px; letter-spacing: 0px; background-color: rgb(255, 255, 255);"> <span class="ccb-arrow-up ccb-arrow"></span> <span class="ccb-arrow-down ccb-arrow"></span></div>