title: Adding div on click only once and allowing customer to delete it and reclick it
body: <p>I'm trying to make a button that when clicked displays only one div. If the user chooses they can click on the remove button and the data in any fields will be cleared and the text inside the div deleted. If a user chooses they can click the button again to bring back the div but cannot create the div more than once. I can make the initial div appear like its suppose to but beyond that I'm stuck. </p>
  
  <p>Here is a list of things I've tried</p>
  
  <pre><code>$(document).on('click', '.remove', function(){
       $document.getElementById("demo") .remove('.innerHTML');
       $(document).on('click', '.empty', function(){
          $('#demo').empty();
       });
   }); 
  </code></pre>
  
  <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>var count = 0;
  
  function myFunction() {
    document.getElementById("demo").innerHTML = '&lt;div id="formwrap2" class="test' + count + '" name="test' + count + '"&gt;&lt;div id="ddd"&gt;&lt;div id="driverinfo"&gt;Renters Info&lt;button type="button" name="remove"  id="test2" class="btn btn-danger btn-sm remove"&gt;&lt;span class="glyphicon glyphicon-minus"&gt;Remove Renters&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;div id="formwrap"&gt;&lt;div id="ftx1"&gt;APT OR UNIT:&lt;/div&gt;&lt;section class="plan cf"&gt;&lt;input type="radio" name="aptorunit' + count + '" id="Apt' + count + '" value="Apt"&gt;&lt;label class="free-label four col" for="Apt' + count + '"&gt;Apt&lt;/label&gt;&lt;input type="radio" name="aptorunit' + count + '" id="Unit' + count + '" value="Unit" &gt;&lt;label class="basic-label four col" for="Unit' + count + '"&gt;Unit&lt;/label&gt;&lt;/section&gt;&lt;/div&gt;&lt;div id="formwrap"&gt;&lt;div id="ftx1"&gt;COVERAGE :&lt;/div&gt; &lt;input type="text" id="addy" name="propcover" size="" maxlength="15" placeholder="10k to 100k"/&gt;&lt;/div&gt;&lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/div&gt;';
  }
  
  
  $(document).on('click', '.empty', function() {
    $('#demo').empty();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;body&gt;
  
    &lt;button onclick="myFunction()"&gt;Add Renters&lt;/button&gt;
  
    &lt;p id="demo"&gt;&lt;/p&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>