title: Disable form-group input by javascript
body: <p>I have a form in jsp in which input field for dish name, dish ingredients, price, button for disable input field and plus button for add new Menu as look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/OqdQP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OqdQP.png" alt="enter image description here"></a></p>
  
  <p><strong>JSP:</strong></p>
  
  <pre><code>&lt;form id="menuForm" method="post" class="field_wrapper form-horizontal" action="anotherMenu.jsp"&gt; 
     &lt;div class="menu_item"&gt;
         &lt;div class="form-group"&gt;
              &lt;label class="col-sm-1 control-label"&gt;Menu&lt;/label&gt; 
              &lt;div class="col-sm-2"&gt;
                   &lt;input type="text" id="dishname" class="form-control" name="dishname[0]" placeholder="Enter dish name"/&gt;
              &lt;/div&gt;  
              &lt;div class="col-sm-4"&gt;
                   &lt;input type="text" id="ingredient" class="form-control" name="ingredient[0]" placeholder="Dish ingredients"/&gt;
              &lt;/div&gt;
              &lt;i class="col-sm-1 control-label fa fa-inr"&gt;&lt;/i&gt;
              &lt;div class="col-sm-1"&gt;
                   &lt;input type="number" id="price" class="form-control" name="price[0]" placeholder="Rs. /-" pattern="[0-9]*"/&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-1"&gt;
                   &lt;button type="button" class="activate btn btn-default"&gt;Disable&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-1"&gt;
                   &lt;button type="button" class="btn btn-default addButton" id="addInput"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt;&lt;/button&gt;
              &lt;/div&gt;
         &lt;/div&gt;
     &lt;/div&gt;
         &lt;div class="form-group"&gt;
             &lt;div class="col-sm-4 col-sm-offset-1"&gt;
                  &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
             &lt;/div&gt;
         &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>script:</strong></p>
  
  <pre><code>   &lt;script&gt;
              $(document).ready(function() {
                  (function ($) {
                      $.fn.toggleDisabled = function() {
                          return this.each(function () {
                              var $this = $(this);
                              if($this.attr('disabled')) {
                                 $this.removeAttr('disabled');
                              }
                              else { 
                                 $('.activate').text("Active");
                                 $this.attr('disabled', 'disabled'); 
                              }
                          });
                      };
                  })(jQuery);
                  $(function() {
                      $('.activate').click(function() {
                          $('.activate').text("Disable");
                          $('input:text').toggleDisabled();
                          $('#price').toggleDisabled();
                      });
                  });
  
                  var max_field = 10, //validate for maximum input field
                      wrapper = $(".field_wrapper"),
                      add_button = $(".addButton"),                
                      x = 1, //used to increase the input field.
                      index = 0;  //used to increment the 'name' for the input
  
                  //Add button click handler    
                  $(add_button).on('click', function (e) {
                      e.preventDefault();
                      if(x &lt; max_field) {
                          x++;
                          index++;  
                          var fieldHTML = '&lt;div class="form-group removeGroup"&gt;\n'
                                    +'&lt;label class="col-sm-1 control-label"&gt;Menu&lt;/label&gt;\n' 
                                    +'&lt;div class="col-sm-2"&gt;\n'
                                         +'&lt;input type="text" id="dishname" class="form-control" name="dishname[' + index + ']" placeholder="Enter dish name"/&gt;\n'
                                    +'&lt;/div&gt;\n'  
                                    +'&lt;div class="col-sm-4"&gt;\n'
                                        +'&lt;input type="text" id="ingredient" class="form-control" name="ingredient[' + index + ']" placeholder="Dish ingredients"/&gt;\n'
                                    +'&lt;/div&gt;\n'
                                    +'&lt;i class="col-sm-1 control-label fa fa-inr"&gt;&lt;/i&gt;\n'
                                    +'&lt;div class="col-sm-1"&gt;\n'
                                        +'&lt;input type="text" id="price" class="form-control" name="price[' + index + ']" placeholder="Rs. /-"/&gt;\n'
                                    +'&lt;/div&gt;\n'
                                    +'&lt;div class="col-sm-1"&gt;\n'
                                        +'&lt;button type="button" class="activate btn btn-default" id="active"&gt;Disable&lt;/button&gt;\n'
                                    +'&lt;/div&gt;\n'
                                    +'&lt;div class="col-sm-1"&gt;\n'
                                        +'&lt;button type="button" class="btn btn-default removeButton"&gt;&lt;i class="fa fa-minus"&gt;&lt;/i&gt;&lt;/button&gt;\n'
                                    +'&lt;/div&gt;\n'
                                  +'&lt;/div&gt;';
  
                          var currentEntry = $(this).parents('.menu_item:first');
                          $(fieldHTML).appendTo(currentEntry);
                      }
                  });                
  
                  //Remove button click handler
                  $(wrapper).on('click', '.removeButton', function(e) {
                      e.preventDefault();
                      $(this).closest('.removeGroup').remove();
                      x--;
                  });                
              });
          &lt;/script&gt;
  </code></pre>
  
  <p><strong>Problem:</strong>  When i click on first <code>Disable</code> button, then all input of from disable as like image below:</p>
  
  <p><a href="https://i.stack.imgur.com/HzMfC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HzMfC.png" alt="enter image description here"></a></p>
  
  <p>I want to disable particular form-group inputs by corresponding 'Disable' buttons. I know the problem in the script, but how to solve it. Please help.</p>
  
  <p>Thanks!</p>