title: How can I generate multiple divs dynamically on click?
body: <p>So I have a a web app where the user has to enter a product number and next to the input field is an arrow that the user clicks. On click, there is a check to ensure the number the user entered is a valid product number (it checks it against an array of valid numbers) and if it's valid, it should show and populate div with information related to that product.</p>
  
  <p>If the user enters the same number again and clicks the arrow again, the same div should show up but underneath the first div. If the user enters another valid number (not same number), it will show a div with that product info underneath the first div. If user enters an invalid number, then it should throw an error saying invalid div. The last bit is not important, just that it should not generate another div. </p>
  
  <p>What I have done so far is a show-hide method to show/hide div in my html file based on whether or not the number is valid. However, I would like generate multiple divs if number is valid (multiple transactionDetails div shown below). I was wondering how can I do that? </p>
  
  <p>Here's my html snippet: </p>
  
  <pre><code>&lt;input class="numberInput" formControlName="ProductNumber" type="number" placeholder="{{'EnterNumber' | translate}}" [ngClass]="displayErrors ? 'inputRedBorder': 'input'" style="width:150px !important;"/&gt;
  
      &lt;span (click)="validateNumber()"&gt;
          &lt;svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 8 8" style="vertical-align: middle;"&gt;
              &lt;path d="M5 0v2h-5v1h5v2l3-2.53-3-2.47z" transform="translate(0 1)" /&gt;
          &lt;/svg&gt;
      &lt;/span&gt;
  
    &lt;div class="transactionDetails grid" *ngIf="showResults"&gt;
      &lt;span&gt;
          &lt;svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 8 8"&gt;
          &lt;path d="M4 0c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-1.5 1.78l1.5 1.5 1.5-1.5.72.72-1.5 1.5 1.5 1.5-.72.72-1.5-1.5-1.5 1.5-.72-.72 1.5-1.5-1.5-1.5.72-.72z" /&gt;
          &lt;/svg&gt;
      &lt;/span&gt;
      &lt;span class="image"&gt;{{product.image}}&lt;/span&gt;
      &lt;span&gt;
          &lt;div class="itemDescriptionText-regular"&gt;{{product.number}}&lt;/div&gt;
          &lt;div class="itemDescriptionText-regular"&gt;{{product.description}}&lt;/div&gt;
          &lt;div class="itemDescriptionText-bold"&gt;{{product.style}}&lt;/div&gt;
      &lt;/span&gt;
      &lt;span&gt;
      &lt;/span&gt;
      &lt;span&gt;
          &lt;div style="padding-left:20px;padding-bottom:10px;"&gt;Price &lt;/div&gt;
          &lt;div&gt;&lt;input class="transactionInput" placeholder="{{'EnterPrice' | translate}}"/&gt;x&lt;/div&gt;
      &lt;/span&gt;
      &lt;span&gt;
      &lt;div style="text-align:center;padding-right:30px;padding-bottom:10px;"&gt;Qty&lt;/div&gt;
      &lt;div style="text-align:center;"&gt;
          &lt;input type='number' name='quantity' min=0 oninput="validity.valid||(value='');" class='qty'/&gt;
      &lt;/span&gt;
      &lt;span&gt;
      &lt;div style="text-align:center;"&gt;
          Total Price 
      &lt;/div&gt;
      &lt;div&gt;&lt;br&gt;&lt;/div&gt;
      &lt;div style="text-align:center;"&gt;
          {{totalAmount}} 
      &lt;/div&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my validate function:</p>
  
  <pre><code>listOfValidProductNumbers = [ 
    3097165,
    6100256,
    6124380,
    2177422,
    3795377,
    6097961,
    3808804,
    6110164,
    1705466]; 
  
  validateSKU() 
  {
     const productNumber = this.transactionForm.get('ProductNumber').value;
  
      if (this.listOfValidProductNumbers.indexOf(productNumber) &gt; -1 ) {
        this.showResults = true;
      } else {
        this.showResults = false;
      }
  }
  </code></pre>