I have a requirement where I have to create Opportunity line Item on click of custom button(LWC) on Opportunity. This component have multiple picklist fields. It works something like below Field "Product Selection" contains values Red,White, Black On selection of value in Field "Product Selection" ex Red , "Field PLCC Specification" is visible with values as (Red1, Red2, Red3) On selection of value in Field "Product Selection" ex Black , "CO-brand Specifications / Tiers" is visible with values as (Black1, Black2)
Now after adding all products when user click on save, Opportunity line Item record must be created i.e if user add 2 rows then 2 records will be added
I wanto know how to handle save for such situation.
 

import { LightningElement, wire, track, api } from "lwc";
import getProducts from "@salesforce/apex/NewOpportunityLineItem.getProducts";
import getSpecifications from "@salesforce/apex/NewOpportunityLineItem.getSpecifications";
import ceateOpportunityLineItem from "@salesforce/apex/NewOpportunityLineItem.ceateOpportunityLineItem";
import { ShowToastEvent } from "lightning/platformShowToastEvent";

export default class OpportunityLineItemCreation extends LightningElement {
  @track prodId;
  @api recordId;
  valueText = "Select Product";
  @track productData; //contain product object data for 4 products
  keyIndex = 0;
  @track itemList = [
    {
      id: 0,
    },
  ];
  //  Array of picklist values  //
  @track returnOptions = [];
  @track storeNameId = [];
  @track plccOptions = [];
  @track coBrandOptions = [];
  @track mCardSpecsOptions = [];
  @track visaSpecsOptions = [];
  @track mcStandardSpecsOptions = [];
  @track mcWordSpecsOptions = [];
  @track vStandardSpecsOptions = [];
  @track vSignatureSpecsOptions = [];
  @track parameterObjectWrapper = [];
  // Contains selected picklist value //
  @track storevalue = "";
  @track plccValue = "";
  @track coBrandValue = "";
  @track mcSpecsValue = "";
  @track mcStandardSpecsValue = "";
  @track mcWordSpecsValue = "";
  @track vSpecsValue = "";
  @track vStandardSpecsValue = "";
  @track vSignatureSpecsValue = "";
  // BOOLEAN //
  showSpinner = false;
  showModal = false;
  @track isPLCC = true;
  @track isCoBrand = true;
  @track isMasterCard = true;
  @track isVisa = true;
  @track isVisaStandard = true;
  @track isMasterStandard = true;
  @track isVisaSignature = true;
  @track isMasterWorld = true;
  allValid = false;
  uniqueCombo = false;
  @wire(getProducts)
  productList;

  get eventOptions() {
    if (this.productList.data) {
      this.productList.data.forEach((ele) => {
        this.returnOptions.push({ label: ele.Name, value: ele.Name });
        this.storeNameId.push({ label: ele.Name, value: ele.Id });
      });
    }
    return this.returnOptions;
  }
  /*get hasResults() {
    return this.eventsList.data.length > 0;
  }*/
  /*Modal toggle start*/
  showModalHandler() {
    //this.returnOptions = [];
    this.showModal = true;
  }
  closeModal() {
    // to close modal window set 'showModal' track value as false
    this.showModal = false;
  }
  /*Modal toggle End*/

  saveOppLineItem() {
    this.parameterObjectWrapper = [];
    //for (var i = 0; i < this.itemList.length; i++) {
      this.validate();
      this.showSpinner = true;
      //if (this.allValid) {
        this.template.querySelector('data-id').forEach(element => {
          this.parameterObjectWrapper.push({
            productName: this.storevalue,
            selProductId: this.prodId,
            plccSpecifications: this.plccValue,
            coBrandTiers: this.coBrandValue,
            mcSpecs: this.mcSpecsValue,
            mcStandardSpecs: this.mcStandardSpecsValue,
            mcWordSpecs: this.mcWordSpecsValue,
            vSpecs: this.vSpecsValue,
            vStandardSpecs: this.vStandardSpecsValue,
            vSignatureSpecs: this.vSignatureSpecsValue,
          });
      });
        
      //}
    //}
    alert(
      "parameterObjectWrapper==" + JSON.stringify(this.parameterObjectWrapper)
    );
    ceateOpportunityLineItem({
      oppLineItemRecList: this.parameterObjectWrapper,
      oppId: this.recordId,
    }).then(() => {
      const evt = new ShowToastEvent({
        message: "Opportunity Line item Created",
        variant: "success",
      });
      //);
      this.dispatchEvent(evt);
      this.showSpinner = false;
    });
  }

  addProduct() {
    var newItemList = [];
    newItemList = this.itemList;
    this.itemList = [];
    this.validate();
    //if (this.allValid) {
      ++this.keyIndex;
      var newItem = [{ id: this.keyIndex }];
      this.itemList = newItemList.concat(newItem);
    //}
  }
  removeRow(event) {
    if (this.itemList.length >= 0) {
      this.itemList = this.itemList.filter(function (element) {
        return parseInt(element.id) !== parseInt(event.target.accessKey);
      });
    }
  }
  ////Validate Opportunity Line Item////
  validate() {
    this.allValid = [...this.template.querySelectorAll(".validValue")].reduce(
      (validSoFar, inputCmp) => {
        inputCmp.reportValidity();
        return validSoFar && inputCmp.checkValidity();
      },
      true
    );
    /*if (this.storevalue == "PLCC" || this.storevalue == "Commercial PLCC") {
              if(){

              }
            }else if (
              this.storevalue == "Co-brand" ||
              this.storevalue == "Commercial Co-brand"
            ) {
            }*/
  }
  ///////// Handle Change Start/////////
  handleEventMgrChange(event) {
    var indexnumber = event.target.dataset.indexnum;
    let iterationindex = this.template.querySelector(
      '[data-indexnum="' + indexnumber + '"]'
    );
    this.storevalue = event.target.value;
    this.valueText = "Product Selected";
    this.isVisaStandard = false;
    this.isMasterStandard = false;
    this.isVisaSignature = false;
    this.isMasterWorld = false;
    this.isMasterCard = false;
    this.isVisa = false;
    this.plccOptions = [];
    var productId = "";
    var plccOptionArray = [];
    var coBrandOptionArray = [];
    this.coBrandOptions = [];

    for (var i = 0; i < this.storeNameId.length; i++) {
      if (this.storeNameId[i].label === this.storevalue) {
        productId = this.storeNameId[i].value;
        this.prodId = productId;
      }
    }
    if (productId) {
      getSpecifications({ selProductId: productId })
        .then((result) => {
          this.productData = result;
          if (
            this.storevalue == "PLCC" ||
            this.storevalue == "Commercial PLCC"
          ) {
            alert("plccjj");

            plccOptionArray =
              this.productData.PLCC_Specifications__c.split(";");
            for (var i = 0; i < plccOptionArray.length; i++) {
              this.plccOptions.push({
                label: plccOptionArray[i],
                value: plccOptionArray[i],
              });
            }

            this.template.querySelectorAll('[data-id="plccspecification"]')
              .forEach((element) => {
                if (
                  element.dataset.id == "plccspecification" &&
                  element.dataset.indexnum == indexnumber
                ) {
                  element.className = "validValue specification customCombobox";
                  element.options = this.plccOptions;
                }
              });
          } else if (
            this.storevalue == "Co-brand" ||
            this.storevalue == "Commercial Co-brand"
          ) {
            alert("co");
            coBrandOptionArray =
              this.productData.CObrand_Specifications_Tiers__c.split(";");
            for (var i = 0; i < coBrandOptionArray.length; i++) {
              this.coBrandOptions.push({
                label: coBrandOptionArray[i],
                value: coBrandOptionArray[i],
              });
            }

            this.template
              .querySelectorAll('[data-id="cobrandspecification"]')
              .forEach((element) => {
                if (
                  element.dataset.id == "cobrandspecification" &&
                  element.dataset.indexnum == indexnumber
                ) {
                  element.className = "validValue specification customCombobox";
                  element.options = this.coBrandOptions;
                }
              });
          }
        })
        .catch((error) => {
          this.error = error;
        });
    }
    // }
  }

  handlePlccSpecification(event) {
    this.plccValue = event.target.value;
    this.isVisaStandard = false;
    this.isMasterStandard = false;
    this.isVisaSignature = false;
    this.isMasterWorld = false;
  }
  handleCoBrandSpecifications(event) {
    var indexnumber = event.target.dataset.indexnum;
    this.isMasterCard = false;
    this.isVisa = false;
    this.isVisaStandard = false;
    this.isMasterStandard = false;
    this.isVisaSignature = false;
    this.isMasterWorld = false;
    this.coBrandValue = event.target.value;
    this.mCardSpecsOptions = [];
    this.visaSpecsOptions = [];
    var masterCardSpecsArray = [];
    var visaSpecArray = [];
    if (this.coBrandValue == "MasterCard") {
      masterCardSpecsArray = this.productData.Mastercard_Specs__c.split(";");
      for (var i = 0; i < masterCardSpecsArray.length; i++) {
        this.mCardSpecsOptions.push({
          label: masterCardSpecsArray[i],
          value: masterCardSpecsArray[i],
        });
      }
      this.template
        .querySelectorAll('[data-id="masterCardSpecs"]')
        .forEach((element) => {
          if (
            element.dataset.id == "masterCardSpecs" &&
            element.dataset.indexnum == indexnumber
          ) {
            element.className = "validValue specification customCombobox";
            element.options = this.mCardSpecsOptions;
          }
        });
    } else if (this.coBrandValue == "Visa") {
      visaSpecArray = this.productData.Visa_Specs__c.split(";");
      for (var i = 0; i < visaSpecArray.length; i++) {
        this.visaSpecsOptions.push({
          label: visaSpecArray[i],
          value: visaSpecArray[i],
        });
      }
      this.template
        .querySelectorAll('[data-id="visaSpecs"]')
        .forEach((element) => {
          if (
            element.dataset.id == "visaSpecs" &&
            element.dataset.indexnum == indexnumber
          ) {
            element.className = "validValue specification customCombobox";
            element.options = this.visaSpecsOptions;
          }
        });
    }
  }
  handleMasterCardSpecs(event) {
    var indexnumber = event.target.dataset.indexnum;
    var iterationindex = this.template.querySelector(
      '[data-indexnum="' + indexnumber + '"]'
    );
    //if (indexnumber == iterationindex.dataset.indexnum) {
      this.isMasterStandard = false;
      this.isMasterWorld = false;
      this.isVisaStandard = false;
      this.isVisaSignature = false;
      this.mcSpecsValue = event.target.value;
      this.mcStandardSpecsOptions = [];
      this.mcWordSpecsOptions = [];
      var mcStandardSpecsArray = [];
      var mcWordSpecsArray = [];
      if (this.mcSpecsValue == "Standard") {
        mcStandardSpecsArray =
          this.productData.Mastercard_Standard_Specs__c.split(";");
        for (var i = 0; i < mcStandardSpecsArray.length; i++) {
          this.mcStandardSpecsOptions.push({
            label: mcStandardSpecsArray[i],
            value: mcStandardSpecsArray[i],
          });
        }
        this.template
          .querySelectorAll('[data-id="masterStandard"]')
          .forEach((element) => {
            if (
              element.dataset.id == "masterStandard" &&
              element.dataset.indexnum == indexnumber
            ) {
              element.className = "validValue specification customCombobox";
              element.options = this.mcStandardSpecsOptions;
            }
          });
      } else if (this.mcSpecsValue == "World") {
        mcWordSpecsArray = this.productData.MasterCard_Word_Specs__c.split(";");
        for (var i = 0; i < mcWordSpecsArray.length; i++) {
          this.mcWordSpecsOptions.push({
            label: mcWordSpecsArray[i],
            value: mcWordSpecsArray[i],
          });
        }
        this.template
          .querySelectorAll('[data-id="masterWorld"]')
          .forEach((element) => {
            if (
              element.dataset.id == "masterWorld" &&
              element.dataset.indexnum == indexnumber
            ) {
              element.className = "validValue specification customCombobox";
              element.options = this.mcWordSpecsOptions;
            }
          });
      }
    //}
  }
  handleVisaSpecsChanges(event) {
    var indexnumber = event.target.dataset.indexnum;
    var iterationindex = this.template.querySelector(
      '[data-indexnum="' + indexnumber + '"]'
    );
    //if (indexnumber == iterationindex.dataset.indexnum) {
      this.isVisaStandard = false;
      this.isVisaSignature = false;
      this.isMasterStandard = false;
      this.isMasterWorld = false;
      this.vSpecsValue = event.target.value;
      this.vStandardSpecsOptions = [];
      this.vSignatureSpecsOptions = [];
      var vStandardSpecsArray = [];
      var vSignatureSpecsArray = [];
      if (this.vSpecsValue == "Standard") {
        vStandardSpecsArray =
          this.productData.Visa_Standard_Specs__c.split(";");
        for (var i = 0; i < vStandardSpecsArray.length; i++) {
          this.vStandardSpecsOptions.push({
            label: vStandardSpecsArray[i],
            value: vStandardSpecsArray[i],
          });
        }
        this.template
          .querySelectorAll('[data-id="visaStandard"]')
          .forEach((element) => {
            if (
              element.dataset.id == "visaStandard" &&
              element.dataset.indexnum == indexnumber
            ) {
              element.className = "validValue specification customCombobox";
              element.options = this.vStandardSpecsOptions;
            }
          });
      } else if (this.vSpecsValue == "Signature") {
        vSignatureSpecsArray =
          this.productData.Visa_Signature_Specs__c.split(";");
        for (var i = 0; i < vSignatureSpecsArray.length; i++) {
          this.vSignatureSpecsOptions.push({
            label: vSignatureSpecsArray[i],
            value: vSignatureSpecsArray[i],
          });
        }
        this.template
          .querySelectorAll('[data-id="visaSignature"]')
          .forEach((element) => {
            if (
              element.dataset.id == "visaSignature" &&
              element.dataset.indexnum == indexnumber
            ) {
              element.className = "validValue specification customCombobox";
              element.options = this.vSignatureSpecsOptions;
            }
          });
      }
    //}
  }
  handleVisaStandardChanges(event) {
    this.vStandardSpecsValue = event.target.value;
  }
  handleVisaSignatureChanges(event) {
    this.vSignatureSpecsValue = event.target.value;
  }
  handleMasterStandardChanges(event) {
    this.mcStandardSpecsValue = event.target.value;
  }
  handlemasterWorldChanges(event) {
    this.mcWordSpecsValue = event.target.value;
  }
  ///////// Handle Change End/////////

}