title: add text area on selecting options in dropdown list in java script
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function showInsertQuest(){
      var x = document.getElementById("one");
      if (x.style.display === "none"){
          x.style.display = "block";
      } else {
          x.style.display = "block";
      }
  }
  
  
  const target = document.querySelector("#second");
  
  const displayWhenSelected = (source, value, target) =&gt; {
      const selectedIndex = source.selectedIndex;
      const isSelected = source[selectedIndex].value === value;
      target.classList[isSelected
          ? "add"
          : "remove"
      ]("show");
  };
  if(source= document.querySelector("#location"))
  source.addEventListener("change", (evt) =&gt;
      displayWhenSelected(source, "loc5", target)
  );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    align-items: center;
  }
  #container {
    border: 4px solid;
    position: auto;
    height: 650;
    width: 700px;
  }
  .main {
    border-bottom: solid;
    margin-bottom: 0px;
  }
  h2 {
    margin-left: 10px;
    margin-bottom: 1%;
    color: darkcyan;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  }
  #bottom {
    border-top: 0.7solid;
    margin-top: 0px;
  }
  button {
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 4px;
    background-color: darkcyan;
    color: white;
    height: 35px;
    width: 80px;
    margin-top: -25px;
  }
  
  /* Insert Button */
  
  .insert-btn {
    margin-left: 0px;
    margin-top: 480px;
    color: grey;
    margin-bottom: 0px;
    padding-left: 510.53px;
    border-top: none;
    height: 40px;
    font-weight: 200;
    font-size: 1.05rem;
  }
  
  
  .insert-btn:hover {
    background: grey;
    box-shadow: var(--shadow);
    color: white;
  }
  
  .insert-btn:active {
    background: grey;
    color: black;
    border: transparent;
  }
  
  #one {
    width: 700px;
    position: fixed;
    margin-top: 10px;
    display: none;
  }
  
  #one input {
    width: 0px;
    border: 1px solid;
    border-radius: 5px;
    display: inline;
    padding-right: 500px;
    padding-left: 7px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: grey;
  }
  
  #one #Multiplechoice {
    margin-right: 0px;
    display: inline;
    border: none;
    position: fixed;
    height: 19px;
  }
  
  i {
    padding-left: 12px;
    padding-right: 5px;
    padding-top: 1px;
    color: grey;
  }
  #one .on {
    padding-left: 9px;
  }
  
  #one #second {
    margin-left: 22px;
    margin-top: 5px;
    display: none;
  }
  #one #second .show {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
      &lt;div class="main"&gt;
          &lt;h2&gt;ADD NEW CALL&lt;/h2&gt;
      &lt;/div&gt; 
         
      &lt;section class="insert-quest" id="insertquestone"&gt;
          &lt;div id="one" &gt;
              &lt;div class="on"&gt;
                  1 &lt;input type="text"/&gt;&lt;i class="fa fa-adn" aria-hidden="true"&gt;&lt;/i&gt;
  
                  &lt;!-- DROPDOWN --&gt;
                  &lt;select id="location" name="drop"&gt;
                      &lt;option value="Select"&gt;Select&lt;/option&gt;
                      &lt;option value="loc5" &gt;Multi-line text&lt;/option&gt;
                      &lt;option value="loc6" &gt;Single choice&lt;/option&gt;
                      &lt;option value="loc7"&gt;Multi choice&lt;/option&gt;      
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;!-- TEXTAREA --&gt;
              &lt;textarea name="term" id="second" cols="50" rows="3"&gt;&lt;/textarea&gt;        
         &lt;/div&gt;
     &lt;/section&gt;
  
      &lt;div id="content"&gt;
  
          &lt;!-- Insert Quest Button --&gt;
          &lt;input type="button" value="+ADD NEW QUESTION" class="insert-btn" id="insertbtn" onclick="showInsertQuest()"/&gt;
      &lt;/div&gt;
      &lt;div id="bottom"&gt;
          &lt;h3&gt;&lt;button&gt;SAVE&lt;/button&gt; cancel &lt;/h3&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>UPDATE:</strong> I modified codes in your question for better readability @Adam P.</p>
  <p>trying to get a text area on selecting multi line text from drop down list
  SIMAILARLY on selecting single choice add 1 text box below the question
  and on selecting single choice add 5 text box below the question...</p>
  <p>getting error of Cannot read property 'addEventListener' of null</p>