title: Creating a textarea when user clicks button
body: <p>I was wondering what the best way to approach this next feature is. 
  Right now, when user selects "no" an alert appears. However, I would like for a text area box to appear, instead. Any help or leads on how to tackle this?  My first thought is that my if statement will have to change, correct?  Any leads are appreciated.   I provided a snippet for you to view of what I have so far. </p>
  
  <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>let button = document.querySelector("input.button");
  
  button.addEventListener("click", question1);
  
  function question1() {
    var selection = document.querySelector("input[name='groupOfDefaultRadios']:checked");
  
    if (selection.value == 'yes') {
      alert("Thank you for your kindness");
    } else {
      alert("We are sorry! Please write to us telling us what was wrong");
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="clienthelp-card"&gt;
    &lt;form id="myForm"&gt;
      &lt;h4&gt; Was this helpful?&lt;/h4&gt;
      &lt;div class="custom-control custom-radio"&gt;
        &lt;input type="radio" class="custom-control-input" id="defaultGroupExample1" name="groupOfDefaultRadios" value="yes"&gt;
        &lt;label class="custom-control-label" for="defaultGroupExample1"&gt;Yes&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="custom-control custom-radio"&gt;
        &lt;input type="radio" class="custom-control-input" id="defaultGroupExample2" name="groupOfDefaultRadios" value="no"&gt;
        &lt;label class="custom-control-label" for="defaultGroupExample2"&gt;No&lt;/label&gt;
      &lt;/div&gt;
      &lt;input class="button" type="button" name="groupOfDefaultRadios" value="Submit"&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>