title: How to add and remove rows with buttons using jquery?
body: <p>How I can add rows while clicking on the <code>+</code> button. And delete rows while clicking on the <code>-</code> button
  Below is the code.</p>
  <p>please assist me with guidelines or even a piece of code in <code>javascript</code> that I can use to add and delete rows using the <code>buttons</code>.</p>
  <p>Help would be greatly appreciated.</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-html lang-html prettyprint-override"><code>    &lt;body&gt;
        &lt;div class="container"&gt;
          &lt;form method="POST"&gt;
             &lt;div class="form-row"&gt;
                &lt;div class="col"&gt;
                      Dish Name&lt;input type="text" class="form-control" id="dish_name"&gt;
                &lt;/div&gt;
                &lt;div class="col"&gt;
                      Price&lt;input type="text" class="form-control" id="price"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-row"&gt;
                  &lt;div class="col"&gt;
                      Description&lt;input type="text" class="form-control" id="description"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
              &lt;div class="form-row" id="container"&gt;
                  &lt;div class="col-md-3"&gt;
                      Name&lt;input type="text" class="form-control" id="name"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="col-md-3"&gt;
                      Unit&lt;input type="text" class="form-control" id="description"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="col-md-3"&gt;
                      Price&lt;input type="text" class="form-control" id="price1"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="col-md-3"&gt;
                      &lt;button type="button" id="add-row"&gt;&lt;span&gt;+&lt;/span&gt;&lt;/button&gt;
                      
                  &lt;/div&gt;
              &lt;/div&gt;  
  
              &lt;div class="form-row" id="container1"&gt;
              &lt;/div&gt;      
          &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
          
          $(document).ready(function(){
              var data = '&lt;div class="col-md-3"&gt;'
                      + 'Name&lt;input type="text" class="form-control" id="name"&gt;'
                      + '&lt;/div&gt;'
  
                      + '&lt;div class="col-md-3"&gt;'
                      + 'Unit&lt;input type="text" class="form-control" id="description"&gt;'
                      + '&lt;/div&gt;'
  
                      + '&lt;div class="col-md-3"&gt;'
                      + 'Price&lt;input type="text" class="form-control" id="price1"&gt;'
                      + '&lt;/div&gt;'
  
                      + '&lt;div class="col-md-3"&gt;'
                      + '&lt;button type="button" id="delete-row"&gt;&lt;span&gt;-&lt;/span&gt;&lt;/button&gt;'
                      
                      + '&lt;/div&gt;'
                      + '&lt;/div&gt;'
              $('#add-row').click(function(){
                  $('#container1').append(data);
              });
          });
  
        &lt;/script&gt;
      &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>