When button on a specific row clicked, how to gather data from that row and pass to server

I am using dynamically generated rows with my application that gather which stocks a user currently has in their portfolio. The HTML for the portfolio page is as follows:

{% block main %}
    <form action="/" method="get">
        <table class="table table-striped center">
            <thead>
                <tr>
                    <th class="text-start">Symbol</th>
                    <th class="text-start">Name</th>
                    <th class="text-end">Shares</th>
                    <th class="text-end">Price</th>
                    <th class="text-end">TOTAL</th>
                    <th class="text-middle">Buy/Sell</th>
                </tr>
            </thead>
            <tbody>
                {% for stock in stocks %}
                <tr id="selected">
                    <td class="text-start" id="symbol">{{ stock["symbol"] }}</td>
                    <td class="text-start">{{ stock["name"] }}</td>
                    <td class="text-end">{{ stock["shares"] }}</td>
                    <td class="text-end">{{ stock["price"] | usd }}</td>
                    <td class="text-end">{{ ((stock["price"]) * (stock["shares"])) | usd }}</td>
                    <td class="text-middle">
                        <input type="number" min="1" name="shares" placeholder="shares" style="width:80px">
                        <button type="submit" name="action" value="sell" class="btn btn-primary button">Sell</button>
                        <button type="submit" name="action" value="sell" class="btn btn-primary button">Buy</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4" class="text-end"><b>Cash</b></td>
                    <td class="text-end">{{ cash[0]["cash"] | usd }}</td>
                </tr>
                <tr>
                    <td colspan="4" class="text-end"><b>TOTAL</b></td>
                    <td class="text-end">{{ total | usd }}</td>
                </tr>
            </tfoot>
        </table>
    </form>

This turns out to look as follows:

My question is about the sell and buy buttons and the input field associated with each row. Using javaScript, how can I decipher which row the button was clicked on and then gather that rows data and pass to the server side to then check and update that users database of stocks? I have fiddled and looked around and got this but have not been able to connect the dots…

    <script>
        document.querySelector("form").addEventListener("submit", function(event) {
            let row = event.target.parentNode.parentNode.id;
            let data = document.getElementbyId(row).querySelector("#symbol");
            console.log(data);
        });
    </script>
{% endblock %}