He everyone.
Please help me add edit inline logic in custom table. It should turn out like this:



My attempt:
Html
<template>
  <lightning-card title="Custom Inline Edit" icon-name="utility:edit">
   
        <table class="slds-table slds-table_cell-buffer slds-table_bordered">
        <thead>
          <tr class="slds-line-height_reset">
              <th class="" scope="col">
                  <div class="slds-truncate" title="Name">Name</div>
              </th>
              <th class="" scope="col">
                  <div class="slds-truncate" title="Rating">Rating</div>
              </th>                       
          </tr>
      </thead>
      <tbody>
        <template for:each={getAccounts.data} for:item="accountItem">
       
          <tr key={accountItem.Id} >
            <td>{accountItem.Name}</td>
            <td>{accountItem.Rating}</td>
     
          <template if:false={editName}>
            <span style="border-bottom: 1px dotted black"
              >{accountItem.Name}
              <lightning-button-icon
                class="slds-float_right"
                icon-name="utility:edit"
                alternative-text="Update Name"
                title="Update Name"
                variant="bare"
                size="medium"
                onclick={handleNameEdit}
              ></lightning-button-icon>
            </span>
          </template>
          <template if:true={editName}>
            <lightning-input
              name="fileExpirationDate"
              value={accountName}
              label=""
              onchange={handleNameChange}
            ></lightning-input>
            <lightning-button-icon
              class="slds-float_right"
              icon-name="utility:save"
              alternative-text="Update Name"
              title="Update Name"
              variant="bare"
              size="large"
              onclick={handleUpdateName}
            ></lightning-button-icon>
          </template>
             
          <template if:false={editRating}>
            <span style="border-bottom: 1px dotted black"
              >{accountItem.Rating}
              <lightning-button-icon
                class="slds-float_right"
                icon-name="utility:edit"
                alternative-text="Update Rating"
                title="Update Rating"
                variant="bare"
                size="medium"
                onclick={handleRatingEdit}
              ></lightning-button-icon>
            </span>
          </template>
          <template if:true={editRating}>
            <lightning-input
              name="fileExpirationDate"
              value={accountRating}
              label=""
              onchange={handleRatingChange}
            ></lightning-input>
            <lightning-button-icon
              class="slds-float_right"
              icon-name="utility:save"
              alternative-text="Update Rating"
              title="Update Rating"
              variant="bare"
              size="large"
              onclick={handleUpdateRating}
            ></lightning-button-icon>
          </template>
        </tr>
      </template>
      </tbody>
      </table>
       
  </lightning-card>
</template>

Js
import { LightningElement, wire, track } from "lwc";
import { refreshApex } from "@salesforce/apex";
import getAccounts from "@salesforce/apex/ProjectFour.getAccounts";
import { updateRecord } from "lightning/uiRecordApi";
import ID_FIELD from "@salesforce/schema/Account.Id";
import NAME_FIELD from "@salesforce/schema/Account.Name";
import RATING_FIELD from "@salesforce/schema/Account.Rating";
export default class CustomInlineEditing extends LightningElement {
  @track account;
  @track accountId;
  @track accountName;
  @track accountRating;
  @track error;
  @track editName = false;
  @track editRating = false;
  @track recordId;
//   @wire (getAccounts) getAccounts;
//   @track recordId;
 
  connectedCallback() {
    getAccounts()
      .then((result) => {
        this.accountId = result.Id;
        this.accountName = result.Name;
        this.accountRating = result.Rating;
      })
      .catch((error) => {
        this.error = error;
      });
  }
  handleNameEdit(event) {
    console.log('handleNameEdit', event);
    this.editName = true;
  }
  handleRatingEdit(event) {
    console.log('handleRatingEdit', event);
    this.editRating = true;
  }
  handleNameChange(event) {
    console.log('handleNameChange', event);
    this.accountName = event.target.value;
  }
  handleRatingChange(event) {
    console.log('handleRatingChange', event);
    this.accountRating = event.target.value;
  }
  handleUpdateName(event) {
    console.log('handleUpdateName', event);
    const fields = {};
    fields[ID_FIELD.fieldApiName] = this.accountId;
    fields[NAME_FIELD.fieldApiName] = this.accountName;
    const recordInput = { fields };
    updateRecord(recordInput)
      .then(() => {
        console.log('Done', event);
        this.editName = false;      
      })
      .catch((error) => {
        console.log("Error updating date => " + error.body.message);
      });
  }
  handleUpdateRating(event) {
    console.log('handleUpdateRating', event);
    const fields = {};
    fields[ID_FIELD.fieldApiName] = this.accountId;
    fields[RATING_FIELD.fieldApiName] = this.accountRating;
    const recordInput = { fields };
    updateRecord(recordInput)
      .then(() => {
        console.log('Done', event);
        this.editRating = false;      
      })
      .catch((error) => {
        console.log("Error updating date => " + error.body.message);
      });
  }
}