Add Section Dynamically With Button Click

Question

I am trying to add a section dynamically with a button click in LWC but I am very new to LWC dev. My code below shows the markup:

<template if:true={hasScreeningQueAccess}>
                <lightning-accordion-section name="section4" label="Screener Questions">
                    <div class="accordion-content">
                        <template if:true={label.ATS_ADDITIONAL_INFORMATION}>
                            <div class="slds-p-bottom_small">
                                <label class="slds-form-element__label slds-p-bottom_small" for="text-input-screening-title">
                                    Enter your questions below. Keep in mind that the talent will only be able to answer Yes or No.
                                </label>
                                <div class="slds-grid slds-wrap slds-border_bottom slds-p-top_x-small slds-p-bottom_x-small slds-p-around_small" style="background-color:#dddbda;">
                                    <div class="slds-col slds-size_1-of-1">
                                        <div class="slds-form-element">
                                            <div class="slds-form-element__control slds-p-top_x-small slds-p-bottom_small">
                                                <div class="slds-clearfix slds-p-bottom_small">
                                                    <div class="slds-float_left">
                                                        <p>Question 1</p>
                                                      </div>
                                                    <div class="slds-float_right">
                                                      <p>Remove Question</p>
                                                    </div>
                                                  </div>
                                              <input type="text" id="text-input-id-47" placeholder="Placeholder text…" required="" class="slds-input" />
                                            </div>
                                          </div>
                                        </div>
                                    <div class="slds-grid slds-p-bottom_small">
                                        <div class="slds-col slds-p-right_x-small">
                                            <p>What is the desired answer? </p>
                                        </div>
                                        <div class="slds-col slds-m-right_large">
                                            <span>
                                                <span class="slds-m-right_small">Yes</span>
                                                <input type="radio" aria-label="Yes" name="Radiobutton" value={item} class="slds-p-top_small" >
                                            </span>
                                        </div>
                                        <div class="slds-col slds-m-right_large">
                                            <span>
                                                <span class="slds-m-right_small">No</span>
                                                <input type="radio" aria-label="No" name="Radiobutton" value={item} class="slds-p-top_small">
                                            </span>
                                        </div>
                                    </div>
                                    
                                    <div class="slds-grid slds-size_1-of-1 slds-p-bottom_small">
                                        <div class="slds-col slds-size_1-of-12">
                                            <lightning-input type="checkbox" data-id="checkbox" label="Yes" value={yes} onchange={handleQustionCheckChange}></lightning-input>
                                        </div>
                                        <div class="slds-col slds-size_11-of-12">
                                            <p>Disqualifying Question</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="slds-p-top_small">
                                    <button onclick={addQuestion} class="slds-button slds-button_neutral">+ Add another question</button>
                                </div>
                            </div>
                        </template>
                    </div>
                </lightning-accordion-section>
            </template>

And of course a JS function but I have left that empty here as everything I have tried to construct does not work:

addQuestion() {
    alert("Clicked");
}

I need to dynamically add another section just like above when the "addQuestion" button is clicked. Maximum of 5 questions. I know this may be trivial to some but again doing this in an LWC is confusing me.

Answer 1

You use for:each, for:item and key attributes to generate a section generated from the items. I wrote a super-simple example that demonstrates this principle.

import { LightningElement } from "lwc";

export default class App extends LightningElement {
  items = [{ id: 0, question: '', answer: ''}];
  update(event) {
    this.items[event.currentTarget.dataset.id][event.target.name] = event.target.value;
  }
  addQuestion() {
    this.items = [...this.items, { id: this.items.length, question: '', answer: ''}];
  }
}

---

<template>
    <div onchange={update} for:each={items} data-id={item.id} for:item="item" key={item.id}>
        <lightning-input name="question" label="Question"></lightning-input>
        <lightning-input name="answer" label="Answer"></lightning-input>
    </div>
    <lightning-button label="Add Question" onclick={addQuestion}></lightning-button>
</template>