title: Jquery append div after certain table row
body: <p>I have a table defined:</p>
  
  <pre><code>&lt;div id="display"&gt;
    &lt;div class="displayRow"&gt;
      &lt;img src="images/expand-arrow.gif" class="expandArrow" alt="expand"&gt;
      &lt;div class="displayElement"&gt;1&lt;/div&gt;
      &lt;div class="displayElement"&gt;Standard&lt;/div&gt;
      &lt;div class="displayElement"&gt;This is more information&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="displayRow"&gt;
      &lt;img src="images/expand-arrow.gif" class="expandArrow" alt="expand"&gt;
      &lt;div class="displayElement"&gt;2&lt;/div&gt;
      &lt;div class="displayElement"&gt;Special&lt;/div&gt;
      &lt;div class="displayElement"&gt;This is more information&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When expandArrow is clicked, I want to display a table of additional data under that particular row.  Can anyone help?  Thanks!</p>
  
  <p>I have tried this to no success:</p>
  
  <pre><code>$(".expandArrow").on("click", function (event) {
     var info = '';
     details += '&lt;div&gt;&lt;table class="detailTable"&gt;';
     details += '&lt;tr&gt;&lt;td&gt;DisplayElement1&lt;/td&gt;&lt;td&gt;' + json.Id + '&lt;/td&gt;&lt;/tr&gt;';
     details += '&lt;tr&gt;&lt;td&gt;Display Element2&lt;/td&gt;&lt;td&gt;' + json.Info + '&lt;/td&gt;&lt;/tr&gt;';
     details += '&lt;/table&gt;&lt;/div&gt;';
  
     $(this).parent().append(details);
  });
  </code></pre>