Идентификация конкретной кнопки в форме

поэтому я хочу получить конкретное значение, если кнопка нажата в моей форме, но каким-то образом она прослушивает все кнопки, а не только кнопки в моей форме.

Вместо приведенного ниже примера javascript я также попытался вызвать класс с помощью

$('.modifygap').bind('click', function (e) {

но в этом примере значение не было установлено правильно.

Вот мой html:

<button type = "button" id = "anotherbutton">Another</button>

<form action = "editortoken_information" id = "showtoken" method = "POST">

    <button class = "btn btn-outline-secondary" type = "submit" name = "modifygap" id = "modifygap" class = "modifygap"
    value = "14" data-value = "test">14</button>

    <button class = "btn btn-outline-secondary" type = "submit" name = "modifygap" id = "modifygap" class = "modifygap" 
    value = "15" data-value = "test">15</button>

</form>

И вот моя функция javascript:

$(document.getElementById("showtoken")).ready(function () {
    $("button").click(function (e) {
         e.preventDefault();
         document.getElementById('tokenindex').value = this.getAttribute("data-value");
    })
})

Я думал, что прослушивая только конкретный идентификатор, он будет обнаруживать только нажатия кнопок в форме. Но почему-то он прослушивает все нажатия кнопок.