navigate using arrow keys instead of tabs

I have a bootstrap modal that has a table on it. I want to navigate on the buttons using arrow keys instead of tabs...

I have tried it using autofocus but is not working. [1]: https://i.stack.imgur.com/U6C9n.png Javascript Code

  for (let i = 0; i < res.data.data.length; i++) {
                    table__body.innerHTML += `<tr>
                                    <td id="english_name"> <p> ${res.data.data[i].english_name} </p></td>
                                    <td id="mrp_price"> <p> ${res.data.data[i].mrp_price} </p></td>
                                    <td id="sale_price"> <p> ${res.data.data[i].sale_price} </p></td>
                                    <td id="barcode"> <p> ${res.data.data[i].barcode} </p></td>
                                    <td id="tax_per" class="d-none"> <p> ${res.data.data[i].tax_per} </p></td>
                                    <td id="product_tax_id" class="d-none"> <p> ${res.data.data[i].product_tax_id} </p></td>
                                    <td id="product_unit_id" class="d-none"> <p> unit ${res.data.data[i].product_unit_id} </p></td>
                                    <td id="product_id" class="d-none" <p>  ${res.data.data[i].product_id} </p></td>
                                    <td id="purchase_price" class="d-none" <p>  ${res.data.data[i].purchase_price} </p></td>
                                    <td id="production_price" class="d-none" <p>  ${res.data.data[i].production_price} </p></td>
                                    <td id="franchise_price" class="d-none" <p>  ${res.data.data[i].franchise_price} </p></td>
                                    <input type="hidden" value="${res.data.data[i].point_value}" id="point_value" />
                                    <td><button type="button" onclick="productWithSameBarcode(this)"  id="focus_on_add_button${i + 1}" class="btn btn-primary">Add</button></td>
                                 </tr>`;
                }

                document.getElementById("call_modal").click();
                let btn = document.getElementById("focus_on_add_button1")
                console.log(btn.setAttribute('autofocus'))
                console.log("focus set")```