Change specific dynamically created table row html and text from ajax response – Jquery ajax

From the database, I have a dynamic table like this:

<table>
    <?php
    $query = ....;
    foreach ($query as $row) {
        echo '<tr>';
        echo '<td>' . ' <span class="bName">' . $row['brand_name'] . '</span>'.
        '<input name="product_id" type="number" value="' . $row['product_id'] . '">'.
        '<input name="company_id[]" type="number" value="' . $row['company_id'] . '">'.
        '<button name="exchange" type="button">Click Me!</button></td>';
        echo '</td>';
        echo '</tr>';
    }
    ?>
</table>

It returns say 4 rows with brand_name inside the <span> and product_id inside an <input>. The exchange button on click calls an ajax request that query another random brand_name and returns the query as JSON like this:

{product_id: '2206', brand_name: 'New name', company_id: '234' }

The script for ajax is

<script>
    $(document).ready(function() {
        $('button[name="exchange"]').click(function() {
            $.ajax({
                url: 'ajaxChangeBrand.php',
                type: 'POST',
                data: 'keyword=' + $(this).parent().find('input[name="product_id"]').val(),
                success: function(response) {
                    var data = JSON.parse(response);
                    $('.bName').html(data.brand_name); // Problem is here
                    $('.company_id').html(data.company_id); // and here
                    console.log(data);
                },
            });
        });
    });
</script>

My target is to change the brand_name inside class bName and company_id value with the new values from ajax response for that specific row. But my problem is it changes all the spans with bName class and all the inputs with class company_id. What should be the best approach to change the specific row of that table from the ajax data?