JSFiddle - React, Tailwind, and code Playground

by kevincollins

HTML

<form id="dash_73" method="post" class="ajax">
    <fieldset>
        <input type="hidden" name="action" value="ajax_purchase_ticket" />
        <input type="hidden" name="lottery_id" value="73" />
        <div class="left1">
            <button type="submit" name="dash" form="dash_73" id="button_73-1" value="1" class="ticket taken" disabled="disabled">User 1</button>
            <br />
            <button type="submit" name="dash" form="dash_73" id="button_73-2" value="2" class="ticket taken" disabled="disabled">User 1</button>
            <br />
            <button type="submit" name="dash" form="dash_73" id="button_73-3" value="3" class="ticket taken" disabled="disabled">User 1</button>
            <br />
            <button type="submit" name="dash" form="dash_73" id="button_73-4" value="4" class="ticket taken" disabled="disabled">User 1</button>
            <br />
            <button type="submit" name="dash" form="dash_73" id="button_73-5" value="5" class="ticket free">5 Dash</button>
            <br />
            <button type="submit" name="dash" form="dash_73" id="button_73-6" value="6" class="ticket taken" disabled="disabled">User 2</button>
            <br />
        </div>
        <div class="left2">
            <button type="submit" name="dash" form="dash_73" id="button_73-7" value="7" class="ticket yours" disabled="disabled">User 3</button>
            <br />
            <button type="submit" name="dash" form="dash_73" id="button_73-8" value="8" class="ticket yours" disabled="disabled">User 3</button>
            <br />
            <button type="submit" name="dash" form="dash_73" id="button_73-9" value="9" class="ticket yours" disabled="disabled">User 3</button>
            <br />
            <button type="submit" name="dash" form="dash_73" id="button_73-10" value="10" class="ticket yours" disabled="disabled">User 3</button>
            <br />
            <button type="submit" name="dash" form="dash_73" id="button_73-11" value="11" class="ticket...

JavaScript

$('button[name="dash"]').click(function (e) {
    e.preventDefault();
    var $formElem = $(this).closest('form');
    var formData = $formElem.serializeArray();
    formData.push({
        name: this.name,
        value: this.value
    });
    // if you want to submit the 'form' attribute of the button as well ...
    formData.push({
        name: 'form',
        value: $(this).attr('form')
    });
    $.ajax({
        url: 'index.php',
        type: 'post',
        data: formData, 
        success: function () {
            //alert(response);
        }
    })
    /* should pass this form data: 
       action=ajax_purchase_ticket&lottery_id=73&dash=5&form=dash_73
    */
});