Issue in adding and removing rows dynamically in LWC

I am trying to add and remove rows in LWC, but every time when I click the tile it just add two tiles of that in another component.

So every time when I click on the second tile it just losing its first record Id. How would I achieve that when I click on the second picture then it should be in the second row.

  @api recordId;

  @api objectRecordId;

  selectedName;

  productName;
  productPrice;
  productInfo;
  productImage;
  noOfProducts = 0;
  totalCost = 0;
  pricebookEntryId;
  prodId;
  tempProdId;

  subscription;
  addUserModal = false;

  keyIndex = 0;
  @track itemList = [
    {
      recordId: 0
    }
  ];
    connectedCallback() {
    this.subscription = subscribe(
      this.messageContext,
      PRODUCT_SELECTED_MESSAGE,
      (message) => this.handleProductSelected(message.productId)
    );
  }
    handleProductSelected(productId) {
    var cartObj = {};
    var objOfCartObj = {};
    var newItem = [];
    this.recordId = productId;
    getProductInfo({ recordId: this.recordId }).then((data) => {
      this.productInfo = data;
      for (var i = 0; i < this.productInfo.length; i++) {
        this.productImage = this.productInfo[0].Product2.Picture_URL__c;
        this.productName = this.productInfo[0].Product2.Name;
        this.productPrice = this.productInfo[0].UnitPrice;
        this.pricebookEntryId = this.productInfo[0].Id;
        this.prodId = this.productInfo[0].Product2Id;
      }
      this.totalCost = this.totalCost + this.productPrice;
      
      if(this.keyIndex == 0){
        this.keyIndex++;
        newItem = [{ recordId: this.keyIndex }];
        this.noOfProducts = this.noOfProducts + 1;
      }
      if(this.tempProdId == this.prodId){
        this.noOfProducts = this.noOfProducts + 1;
        
      }
      if(this.tempProdId != null && this.tempProdId != this.prodId){
        newItem = [{ recordId: this.keyIndex }];
        this.itemList = this.itemList.concat(newItem);
        this.noOfProducts = this.noOfProducts + 1;
        this.keyIndex++;
      }
      this.tempProdId = this.prodId;
      
      cartObj = {
        productId: this.prodId,
        prodName: this.productName,
        prodPriceList: [
          {
            pricebookId: this.pricebookEntryId,
            productId: this.prodId,
            prodPrice: this.productPrice,
            qty: this.noOfProducts,
          },
        ],
      };
    });
  }
deleteRow() {
    
  }


<template>
<lightning-card icon-name="standard:checkout">
    <span slot="title">Cart</span>
    <template if:true={recordId}>
        <template for:each={itemList} for:item="item" for:index="index">
        <div class="slds-grid slds-gutters" key={recordId}>
            <div class="slds-col">
              <span>
                <img src={productImage} class="product slds-align_absolute-center" alt="Issue occured at our end, try refreshing your page"/>&nbsp;
              </span>
            </div>
            <div class="slds-col">
              <span>
                X {noOfProducts}
              </span>
            </div>
            <div class="slds-col">
              <span>
                Price:&nbsp;
                <lightning-formatted-number
                    format-style="currency"
                    currency-code="USD"
                    value={productPrice}
                    class="price">
                </lightning-formatted-number>
              </span>
            </div>
            <div class="slds-col">
                <span>
                    <lightning-button-icon icon-name="utility:delete" variant="container" alternative-text="Delete" class="slds-m-left_xx-small" title="Delete" onclick={deleteRow} access-key={recordId} id={index}></lightning-button-icon>
                </span>
            </div>
        </div>
        </template>
        <div class="slds-grid slds-gutters">
            <div class="slds-col slds-size_2-of-3">
                <div class="slds-m-left_x-small">
                    <span>
                    <p>Total</p>
                    </span>
                </div>
            </div>
            <div class="slds-col slds-size_1-of-3">
                <span>
                    <lightning-formatted-number
                        format-style="currency"
                        currency-code="USD"
                        value={totalCost}
                        class="price">
                    </lightning-formatted-number>
                </span>
            </div>
        </div>
    </template>
    <template if:false={recordId}>
        <p class="slds-align_absolute-center">Select a product to see details</p>
    </template>
</lightning-card>
<lightning-input type="text" value={tempProdId} class="slds-hide"></lightning-input>