Hi!
I have accounts custom table. I need that The Account Name & Rating columns contain an Edit button that appears when hovering over the row. When you click on the Edit button, the cell data should be edited, while the rest of the Edit buttons should not respond to the click, should not be editable and so on until the user clicks cancel or save. Please tell me how can I do that.

Code:
Html
<template>
    <lightning-card title="Account" >
        <table border="1" cellspacing="0" cellpadding="5" style="border-collapse:collapse;" class="tblColPad">
           
            <tr>
                <th>Name</th>
                <th>Rating</th>
                <th>Delete</th>
            </tr>
            <template for:each={getAccount.data} for:item="accountItem">
                <tr key={accountItem.Id}>
                    <td>{accountItem.Name}</td>
                    <td>
                        <lightning-button label="Edit" size="small" variant="neutral"
                        onclick={handleEdit} value={accountItem.Id}
                        icon-name="utility:edit" icon-position="right"
                        class="editButton"></lightning-button>
                       
                       
                       
                        {accountItem.Rating}</td>
                    <td><lightning-button label="Delete" size="small" variant="neutral"
                    onclick={handleDelete} value={accountItem.Id}
                    icon-name="utility:delete" icon-position="right"
                    class="deleteButton"></lightning-button></td>
                </tr>
            </template>
        </table>
    </lightning-card>
</template>

Js
import { LightningElement, track, wire } from 'lwc';
import getAccounts from '@salesforce/apex/ProjectFour.getAccounts';
import {deleteRecord} from 'lightning/uiRecordApi';
import {refreshApex} from '@salesforce/apex';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
 
export default class ProjectFourCustom extends LightningElement {
   
  @wire (getAccounts) getAccount;
  @track recordId;
 
  handleDelete(event){
     this.recordId = event.target.value;
     deleteRecord(this.recordId)
     .then(() =>{
 
        return refreshApex(this.getAccount);
       
     })
     .catch(error =>{
         window.console.log('Unable to delete record due to ' + error.body.message);
     });
  }
 
}

Apex
public class ProjectFour {
    
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        List<Account> accounts = [SELECT Id, Name, Rating FROM Account Limit 3];
        return accounts;    
    } 
}