HTML
<template>
<lightning-card>
        <h3 slot="title">
            <lightning-icon icon-name="standard:timesheet" alternative-text="Event" size="small"></lightning-icon>
            &nbsp;Add Products
        </h3>
        <template for:each={itemList} for:item="item" for:index="index">
             
                <lightning-layout multiple-rows key={item.id}>        
                    <lightning-layout-item size="12" small-device-size="6" medium-device-size="2" large-device-size="2"
                        padding="around-small">
                        <lightning-combobox  name="Product Family" data-id={item.data.id} label="Product Family" placeholder="Select Product Family"
                         options={items}  onchange={handleChange} value={item.data.selectedProductFamily} required="true"></lightning-combobox>
                    </lightning-layout-item>
                    <lightning-layout-item  size="12" small-device-size="6" medium-device-size="2" large-device-size="2"
                    padding="around-small">
                    <lightning-combobox  name="Product" data-id={item.data.id} label="Product"  placeholder="Select Product "
                     options={item.productNames}  onchange={handleChange} value={item.data.selectedProductId} required="true"></lightning-combobox>
                </lightning-layout-item>
                    <lightning-layout-item size="12" small-device-size="6" medium-device-size="2" large-device-size="2"
                        padding="around-small">
                        <lightning-input name="CGST" data-id={item.data.id} label="CGST" value={item.data.selectedCGST} variant="label-stacked" type="number" onchange={handleChange} required>
                        </lightning-input>
                    </lightning-layout-item>
                    <lightning-layout-item size="12" small-device-size="6" medium-device-size="2" large-device-size="2"
                        padding="around-small">
                        <lightning-input name="SGST" data-id={item.data.id} label="SGST" value={item.data.selectedSGST} variant="label-stacked" type="number" onchange={handleChange} required>
                        </lightning-input>
                    </lightning-layout-item>
                    <lightning-layout-item size="12" small-device-size="6" medium-device-size="2" large-device-size="2"
                        padding="around-small">
                        <lightning-input name="IGST" data-id={item.data.id} label="IGST" value={item.data.selectedIGST} variant="label-stacked" onchange={handleChange} type="number">
                        </lightning-input>
                    </lightning-layout-item>
                    <lightning-layout-item size="12" small-device-size="6" medium-device-size="2" large-device-size="2"
                    padding="around-small">
                    <lightning-input name="Quantity" data-id={item.data.id} label="Quantity" value={item.data.selectedQuantity} variant="label-stacked" onchange={handleChange} type="number" required >
                    </lightning-input>
                </lightning-layout-item>
                <lightning-layout-item size="12" small-device-size="6" medium-device-size="2" large-device-size="2"
                padding="around-small">
                <lightning-input name="BasePrice" data-id={item.data.id} label="Base Price" value={item.data.selectedBasePrice} variant="label-stacked" onchange={handleChange} type="number" required >
                </lightning-input>
            </lightning-layout-item>
                    <lightning-layout-item size="12" small-device-size="6" medium-device-size="2" large-device-size="2"
                        padding="around-small">
                        <div class="slds-p-top_medium">
                            <lightning-icon icon-name="action:new" access-key={item.id} id={index}
                                alternative-text="Add Row" size="small" title="Add Row" onclick={addRow}>
                            </lightning-icon>
                            <lightning-icon icon-name="action:delete" access-key={item.id} id={index}
                                alternative-text="Delete Row" size="small" title="Delete Row" onclick={removeRow}>
                            </lightning-icon>
                        </div>
                    </lightning-layout-item>
                </lightning-layout>
 
        </template>
       
        <lightning-layout>
            <div class="slds-align_absolute-center">
                <lightning-button variant="success" onclick={handleSubmit} name="submit" label="Submit">
                </lightning-button>
                <lightning-button icon-name="utility:delete" class="slds-p-around_large" variant="destructive" padding="around-large" type="submit" label="cancel" onclick={handleClose}></lightning-button>
            </div>
        </lightning-layout>
    </lightning-card>  
</template>

JS
import { LightningElement,api,wire,track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import fetchproducts from '@salesforce/apex/Purchaseorder.fetchproducts';
import fetchproductname from '@salesforce/apex/Purchaseorder.fetchproductname';
import createOrderRecord from '@salesforce/apex/Purchaseorder.createOrderRecord';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
export default class PurchaseOrderProductCreatePage extends LightningElement {
    @api PurchaseOrderId;
    keyIndex = 0;
    @track itemList = [
       {data: {
            id: 0,
            selectedCGST:0,
            selectedSGST:0,
            selectedIGST:0,
            selectedQuantity:0,
            selectedListPrice:0,
            selectedProductId:'',
            selectedProductFamily:'',
        },
        productNames:[]}
    ];
    @track  productnames =[];
    @track  productnamelist
    @track  items =[];
    value = '';
    currentIndex=0;
    @wire(fetchproducts) wiredProducts ({ error, data }) {
        if (data) {
           
            console.log('products',data)
            for( var i = 0; i < data.length; i++){
              // if (this.items["value"]!=data[i].family)
                this.items = [...this.items ,{value: data[i] , label: data[i]} ];    
            };
            console.log('options',this.items)
       } else if (error) {
          // this.error = error;  
           console.log('error in LWC', error)
      }   }
    addRow() {
        ++this.keyIndex;
        var newItem = [  {data: {
            id: this.keyIndex,
            selectedCGST:0,
            selectedSGST:0,
            selectedIGST:0,
            selectedQuantity:0,
            selectedListPrice:0,
            selectedProductId:'',
            selectedProductFamily:'',
        },
        productNames:[]} ];
        this.itemList = this.itemList.concat(newItem);
    }
    removeRow(event) {
        if (this.itemList.length >= 1) {
            this.itemList.splice(event.target.accessKey, 1);
            this.keyIndex-1;
            }
            }
    handleChange(event) {
        // Get the string of the "value" attribute on the selected option
        let selectedValue = event.detail.value;
        console.log('selected value=' + selectedValue);
       
        console.log('PurchaseorderId-------' + this.PurchaseorderId);
        let selectedIndex=parseInt(event.target.dataset.id);
        let selectedName=event.target.name;
        if(selectedName=='Product Family'){
            fetchproductname({productFamily:selectedValue})
         .then((result) => {
            let productNames=[]
            console.log('result value=' ,result);
            for( var i = 0; i < result.length; i++){
                // if (this.items["value"]!=data[i].family)
                productNames = [...productNames ,{value: result[i].Id , label: result[i].Name} ];    
              };
            this.error = undefined;
            this.itemList[selectedIndex].productNames=productNames;
            this.itemList[selectedIndex].data.selectedProductFamily=selectedValue;
           
            console.log('filter products', this.itemList);
        })
        .catch((error) => {
            this.error = error;
          console.log('error')
        });
        console.log('filter products', this.productFamily)
        }else if(selectedName=='Product') {
           
        this.itemList[selectedIndex].data.selectedProductId=selectedValue;
        }else if(selectedName=='CGST') {
        this.itemList[selectedIndex].data.selectedCGST=selectedValue;
        }else if(selectedName=='SGST') {
            this.itemList[selectedIndex].data.selectedSGST=selectedValue;
        }
        else if(selectedName=='IGST') {
            this.itemList[selectedIndex].data.selectedIGST=selectedValue;
            }
        else if(selectedName=='Quantity') {
            this.itemList[selectedIndex].data.selectedQuantity=selectedValue;
            }
            else if(selectedName=='BasePrice') {
                this.itemList[selectedIndex].data.selectedBasePrice=selectedValue;
                }
             
                     
        console.log('selectedIndex Id' , event.target.dataset.id);
        console.log('selectedIndex Name' , event.target.name);
         
    }
    handleClose(){
        window.location.reload();
    }
    handleSubmit(event){  
        console.log(JSON.stringify(this.itemList));
        console.log(this.PurchaseorderId);
        let PurchaseorderItemList=[]
        let validtion=false;
        this.itemList.forEach(element => {
            if(element.data.selectedBasePrice ==0 || element.data.selectedQuantity==0 || !element.data.selectedProductId || !element.data.selectedProductFamily){
               
               
                validtion=true;
             

            }
            PurchaseorderItemList.push({
                Product2Id:element.data.selectedProductId,
                Quantity:element.data.selectedQuantity,
               
                UnitPrice:element.data.selectedListPrice,
                CGST__c:element.data.selectedCGST,
                SGST__c:element.data.selectedSGST,
                IGST__c:element.data.selectedIGST,
                purchaseorderId:this.purchaseorderId,
                PricebookEntryId:'01u2y000001jcN9AAI'
            })
        });
        console.log(PurchaseorderItemList);
        if(!validtion){
            createOrderRecord({newPurchaseOrderItemList:PurchaseorderItemList})
            .then((result) => {
                const event = new ShowToastEvent({
                    title: "Success",
                    message: "Products Added Successfullly ",
                    variant:"Success"
                });
                this.dispatchEvent(event);
             
                this[NavigationMixin.Navigate]({
                    type: 'standard__recordPage',
                    attributes: {
                        recordId: this.PurchaseorderId,
                        objectApiName: 'ObjectApiName',
                        actionName: 'view'
                    }
                });
               
           })
           .catch((error) => {
               this.error = error;
             console.log(error)
           });
           
        }else{
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Value Missing',
                    message: 'Please enter required values for product',
                    variant: 'error',
                }),
            );
        }
       
     }

}

Thanks in advance