title: Adding both textbox and textarea dynamically
body: <p>Need to add textbox and textarea dynamically to one of my forms. I found this example which works fine for adding textbox dynamically. </p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      var max_fields      = 10; //maximum input boxes allowed
      var wrapper         = $(".input_fields_wrap"); //Fields wrapper
      var add_button      = $(".add_field_button"); //Add button ID
  
      var x = 1; //initlal text box count
      $(add_button).click(function(e){ //on add input button click
          e.preventDefault();
          if(x &lt; max_fields){ //max input box allowed
              x++; //text box increment
              $(wrapper).append('&lt;div&gt;&lt;input type="text" name="mytext[]"/&gt;&lt;a href="#" class="remove_field"&gt;Remove&lt;/a&gt;&lt;/div&gt;'); //add input box
          }
      });
  
      $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
          e.preventDefault(); $(this).parent('div').remove(); x--;
      })
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="input_fields_wrap"&gt;
      &lt;button class="add_field_button"&gt;Add More Fields&lt;/button&gt;
      &lt;div&gt;&lt;input type="text" name="mytext[]"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Result</strong></p>
  
  <p><a href="https://i.stack.imgur.com/6L7td.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6L7td.png" alt="enter image description here"></a></p>
  
  <p>I tried adding a textarea</p>
  
  <pre><code>$(wrapper).append('&lt;div&gt;&lt;textarea name="desc[]"&gt;&lt;/textarea&gt;&lt;/div&gt;&lt;a href="#" class="remove_field"&gt;Remove&lt;/a&gt;&lt;/div&gt;');
  </code></pre>
  
  <p>to the above javascript </p>
  
  <p>and to the HTML</p>
  
  <pre><code>&lt;div class="input_fields_wrap"&gt;
      &lt;button class="add_field_button"&gt;Add More Fields&lt;/button&gt;
      &lt;div&gt;&lt;input type="text" name="mytext[]"&gt;&lt;/div&gt;
      &lt;div&gt;&lt;textarea name="desc[]"&gt;&lt;/textarea&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but it turns out to be erroneous. How should I add a textarea along with the textbox? </p>
  
  <p><strong>Error</strong></p>
  
  <p>The maximum limit allowed is 10. Say I add 6 of these fields and then decide to use 5 of them. If, I remove the last (6th one in this case) all of them get removed.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Link to the above code <a href="https://jsfiddle.net/x6krv00u/" rel="nofollow noreferrer">https://jsfiddle.net/x6krv00u/</a></p>
  
  <p>** I do not know much about javascripts.**</p>