title: JQuery find last child in given div
body: <p>I want to develop a web application where you can specify a question and then provide a choice of multiple answers. I require extra answer 'boxes' to be added when the plus button is clicked, but only added to the specific formRow (see code).
  I have tried the JQuery last function but it will always add after the answer box with id=4.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="formRow"&gt;
                  &lt;a href="#" title="" class="Remove smallButton" style="float:right;"&gt;&lt;img src="images/icons/color/cross.png" alt="" /&gt;&lt;/a&gt;
                  &lt;label&gt;Multiple Choice: &lt;/label&gt;
                  &lt;div class="formRight" style="height:28px;"&gt;Question1: &lt;input type="text" class="MCQuestion" QID="'+QID+'" /&gt;&lt;a href="#" title="" class="AddAns smallButton" style="margin-left:5px;padding: 1px 3px;"&gt;&lt;img src="images/icons/color/plus.png" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="formRight MCAns" id="1"&gt;Answer 1: &lt;input type="text" class="MCAnswer"/&gt;&lt;a href="#" title="" class="DelAns smallButton" style="margin-left:5px;padding: 1px 3px;"&gt;&lt;img src="images/icons/color/cross.png" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="formRight MCAns" id="2"&gt;Answer 2: &lt;input type="text" class="MCAnswer"/&gt;&lt;a href="#" title="" class="DelAns smallButton" style="margin-left:5px;padding: 1px 3px;"&gt;&lt;img src="images/icons/color/cross.png" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="formRow"&gt;
                  &lt;a href="#" title="" class="Remove smallButton" style="float:right;"&gt;&lt;img src="images/icons/color/cross.png" alt="" /&gt;&lt;/a&gt;
                  &lt;label&gt;Multiple Choice2: &lt;/label&gt;
                  &lt;div class="formRight" style="height:28px;"&gt;Question2: &lt;input type="text" class="MCQuestion" QID="'+QID+'" /&gt;&lt;a href="#" title="" class="AddAns smallButton" style="margin-left:5px;padding: 1px 3px;"&gt;&lt;img src="images/icons/color/plus.png" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="formRight MCAns" id="3"&gt;Answer 1: &lt;input type="text" class="MCAnswer"/&gt;&lt;a href="#" title="" class="DelAns smallButton" style="margin-left:5px;padding: 1px 3px;"&gt;&lt;img src="images/icons/color/cross.png" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="formRight MCAns" id="4"&gt;Answer 2: &lt;input type="text" class="MCAnswer"/&gt;&lt;a href="#" title="" class="DelAns smallButton" style="margin-left:5px;padding: 1px 3px;"&gt;&lt;img src="images/icons/color/cross.png" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$(document).ready(function() {
  $("body").on("click", ".AddAns", function(event) {
      $(".MCAns").last().after("New Answer Optition"); //Tried this first
      $(".MCAns :last-child").after("New Answer Optition"); //Then this
  });
  });
  </code></pre>