eachLookup.html

<template>
    <template if:true={label}>
        <li data-index={index} style={hideSelectedPicklist} role="presentation"
            onclick={handleSelectPicklist} class="slds-listbox__item" aria-disabled="true">
            <div class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta"
                role="option">
                <span class="slds-media__body">
                    <span class="slds-listbox__option-text slds-listbox__option-text_entity">{label}</span>
                </span>
            </div>
        </li>
    </template>
</template>

eachLookup.js

import { LightningElement, api } from 'lwc';

export default class EachLookup extends LightningElement {
    @api index;
    @api label;
    @api selectedSet;

    get hideSelectedPicklist() {
        return this.selectedSet.has(this.label) ? 'pointer-events:none !important; opacity:0.3 !important;' : null;
    }

    handleSelectPicklist(event) {
        console.log('event in last child ---> ');
        let selection = event.currentTarget.getAttribute('data-index');
        const event = new CustomEvent('thispicklist', {
            detail: { selection }
        });
        this.dispatchEvent(event);
    }
}

multiSelectDropdown.html

<div class="slds-col slds-p-bottom_small slds-p-bottom_small slds-p-right_medium slds-size_1-of-1 slds-large-size_6-of-12">
    <div class="slds-form-element">
        <div class="slds-combobox_container">
            <div class="slds-combobox" aria-expanded="true" aria-haspopup="listbox"
                role="combobox">
                <label class="slds-form-element__label">List State(s) or Provinces
                    where person
                    resided
                    in
                    past 5
                    yrs. <abbr class="slds-required" title="required">*
                    </abbr></label>
                <div class={addError}>
                    <div class="slds-pill_container border"
                        style="max-width: fit-content !important" data-pick="true"
                        onclick={handleShowPicklist}>
                        <template if:true={selectedStatesArray}>
                            <template for:each={selectedStatesArray}
                                for:index="index" for:item="picklist">
                                <span key={picklist}
                                    class="slds-pill slds-pill_link pill-color">
                                    <a href="javascript:void(0);"
                                        class="slds-pill__action"
                                        title="Full pill label verbiage mirrored here">
                                        <span
                                            class="slds-pill__label">{picklist}</span>
                                    </a>
                                    <button
                                        class="slds-button slds-button_icon slds-button_icon slds-pill__remove"
                                        title="Remove" type="button"
                                        data-picklist={picklist}
                                        onclick={handlePicklistRemove}>
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                            width="12" height="12"
                                            viewBox="0 0 12 12">
                                            <g class="nc-icon-wrapper"
                                                fill="#999999">
                                                <path
                                                    d="M10.707,1.293a1,1,0,0,0-1.414,0L6,4.586,2.707,1.293A1,1,0,0,0,1.293,2.707L4.586,6,1.293,9.293a1,1,0,1,0,1.414,1.414L6,7.414l3.293,3.293a1,1,0,0,0,1.414-1.414L7.414,6l3.293-3.293A1,1,0,0,0,10.707,1.293Z"
                                                    fill="#999999"></path>
                                            </g>
                                        </svg>
                                    </button>
                                </span>
                            </template>
                        </template>
                    </div>
                    <template if:true={showPicklist}>
                        <div class="slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid"
                            role="listbox">
                            <ul class="slds-listbox slds-listbox_vertical"
                                role="presentation">
                                <template for:each={pastStates} for:index="index"
                                    for:item="each">
                                    <c-each-lookup key={each.value}
                                        index={index} label={each.label}
                                        selected-set={selectedStatesArray}
                                        onthispicklist={handleSelectPicklist}>
                                    </c-each-lookup>
                                </template>
                            </ul>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</div>

multiSelectDropdown.js

/* eslint-disable no-console */
import { LightningElement, wire, track, api } from 'lwc';

import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';

import CONTACT_OBJECT from "@salesforce/schema/Contact";
import STATE_FIELD from "@salesforce/schema/Contact.MailingStateCode";


export default class MultiSelectDropdown extends LightningElement {
  @track showPicklist;
  @track statePicklistValues;
  @track selectedStatesArray = new Set();
  @track selectedStates = '';
  @track pastStates;

  CONTACT_OBJECT = CONTACT_OBJECT;


  @wire(getObjectInfo, { objectApiName: CONTACT_OBJECT })
    objectInfo;
  
  @wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: STATE_FIELD })
    statePicklistWired({ error, data }) {
        if (error) {
            console.log('Error while loading state picklist values --> ' + JSON.stringify(error));
        } else if (data) {
            //console.log('State Picklist values ---> '+JSON.stringify(data));
            let result = data;
            let picklists = [];
            for (let val in result.values) {
                if (result.values.hasOwnProperty(val)) {
                    picklists.push({ label: result.values[val].label, value: result.values[val].value })
                }
            }

            this.pastStates = picklists;
            //console.log('statePicklistValues --> '+JSON.stringify(this.statePicklistValues));

        }
    }
  
  handleShowPicklist() {
        // alert('show');
        this.showPicklist = !this.showPicklist;
  }

  handleSelectPicklist(event) {
        //console.log('log in parent');

        let selection = event.detail.data;
        this.showPicklist = false;

        //console.log('selected picklist --> ' + this.selectedStates.length);

        if (this.selectedStates.length === 0) {
            this.selectedStates = this.selectedStates + this.pastStates[selection].label;
            //console.log('this.selectedStates ---> '+this.selectedStates);

        } else if (this.selectedStates.length > 0) {
            this.selectedStates = this.selectedStates + ';' + this.pastStates[selection].label;
        }
        //console.log('this.selectedStates --- ' + this.selectedStates);

        this.selectedStatesArray.add(this.pastStates[selection].label);
        //console.log('this.selectedStatesArray --- ' + JSON.stringify(this.selectedStatesArray));

    }

    handlePicklistRemove(event) {
        let toRemove = event.currentTarget.getAttribute('data-picklist');
        this.selectedStatesArray.delete(toRemove);
        this.showPicklist = false;
    }
}