title: Remove cloned div one by one from last but not the default one using jquery in MVC 5
body: <p>My default view is this.
  <a href="https://i.stack.imgur.com/m8Hpr.png" rel="nofollow"><img src="https://i.stack.imgur.com/m8Hpr.png" alt="enter image description here"></a></p>
  
  <p>Add button is working as expected but when I try to remove the cloned div I am only able to remove the last one but not <strong>all the cloned div one by one from last expect the default one.</strong></p>
  
  <p>Here is my Div and Jquery to add and remove div.</p>
  
  <p><strong>Add:</strong></p>
  
  <pre><code> $("#AddSubService").click(function(){
                      $("#SubServices").append($('#SubServiceName').clone(true).find("input").val("").end());
                      $("#SubServices").append($('#SubServiceDescription').clone(true).find("input").val("").end());
                  });
  </code></pre>
  
  <p><strong>Remove:</strong></p>
  
  <pre><code>$("#RemoveSubService").click(function(e){                           
                      $("#SubServices").children("div[id=SubServiceDescription]:last").fadeOut();
                      $("#SubServices").children("div[id=SubServiceName]:last").fadeOut();                    
                  });
  </code></pre>
  
  <p><strong>Div:</strong></p>
  
  <pre><code>&lt;div id="SubServices"&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-offset-2 col-md-10"&gt;
                      &lt;h2&gt;Sub Services&lt;/h2&gt;
                      &lt;input type="button" value="Add" class="btn btn-default" id="AddSubService" /&gt; |
                      &lt;input type="button" value="Remove" class="btn btn-default" id="RemoveSubService" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group" id="SubServiceName"&gt;
                  @Html.LabelFor(model =&gt; model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.EditorFor(model =&gt; model.Name, new { htmlAttributes = new { @class = "form-control" } })
                      @Html.ValidationMessageFor(model =&gt; model.Name, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group" id="SubServiceDescription"&gt;
                  @Html.LabelFor(model =&gt; model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.EditorFor(model =&gt; model.Description, new { htmlAttributes = new { @class = "form-control" } })
                      @Html.ValidationMessageFor(model =&gt; model.Description, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>As I am pretty new in MVC and Jquery so any right direction to achieve the same would be highly appreciable.</p>