Не передаёт jquery post данные на php файл

Здраствуйте, я столкнулся с такой проблемой, пишу данные в поле и текст кнопки обновляется при нажатии на саму кнопку но не отправляться данные на php код вернее отправляться но в консоли оно пишется как undefined, пробивал с div на form поставить не понимаю в чём дело. Это мой первый опыт работы с jquery/

Мой .htaccess:

Options -Indexes
ErrorDocument 404 /
ErrorDocument 403 /
php_flag opcache.enable Off
AddDefaultCharset UTF-8
RewriteEngine on 
RewriteRule ^/?news index.php [L]
RewriteRule ^/?donate index.php [L]
RewriteRule ^/?profile index.php [L]

Мой файл php на который передаю данные:

session_start();
if(!empty($_POST["button"]))
{
    echo "pole";
}

Мой файл html с которого я пишу данные:

<div class="form">
    <span id="info"></span>
    <div class="input">
        <div class="input__icon">
            <svg viewBox="0 0 448 512"><path d="M313.6 288c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4zM416 464c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16v-41.6C32 365.9 77.9 320 134.4 320c19.6 0 39.1 16 89.6 16 50.4 0 70-16 89.6-16 56.5 0 102.4 45.9 102.4 102.4V464zM224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm0-224c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"></path></svg>
        </div>
        <input type="text" placeholder="Имя персонажа" class="input__el" id="nickname">
    </div>
    <div class="input">
        <div class="input__icon">
            <svg viewBox="0 0 512 512"><path d="M384 256c-17.67 0-32 14.33-32 32s14.33 32 32 32 32-14.33 32-32-14.33-32-32-32zm80-160h-16V80c0-26.51-21.49-48-48-48H96C42.98 32 0 74.98 0 128v256c0 53.02 42.98 96 96 96h352c35.35 0 64-28.65 64-64V144c0-26.51-21.49-48-48-48zm16 320c0 17.64-14.36 32-32 32H96c-35.29 0-64-28.71-64-64V128c0-35.29 28.71-64 64-64h304c8.82 0 16 7.18 16 16v16H112c-8.84 0-16 7.16-16 16s7.16 16 16 16h352c8.82 0 16 7.18 16 16v272z"></path></svg>
        </div>
        <input type="text" placeholder="Сумма" class="input__el" id="sum">
    </div>
    <div class="form__button">
        <button type="submit" class="btn btn_blue btn_rounded btn_with-shadow btn_with-icon" id="button">
            <span id="button-text">Пополнить</span>
            <svg viewBox="0 0 448 512"><path d="M216.464 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L387.887 239H12c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h375.887L209.393 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L233.434 36.465c-4.686-4.687-12.284-4.687-16.97 0z"></path></svg>
        </button>
        <div class="form__help">Получить информацию об услугах за пожертвования можно на сервере: /mm > Донат</div>
    </div>
</div>

Мой js файл с jquery кодом:

$(document).ready(function() {
    $("#button").click(function() {
        $("#button-text").html('Подождите');
        var nickname = $("#nickname").val();
        var sum = $("#sum").val();
        var button = $("#button").val();
        $.post("/engine/jquery/donate.php", {button: button, nickname: nickname, sum: sum}, function(data) {
            if(data == "notfound") $("#info").html('123');
            else if(data == "success") $("#info").html('123');
            else if(data == "pole") $("#info").html('123');
            console.log( data.nickname );
            console.log( data.sum ); 
            console.log( data.button ); 
        });
    });                     
});