jquery div box appear on top of button
<p>heres the fiddle I'm working on 
<a href="http://jsfiddle.net/d0okie0612/22cTn/" rel="nofollow">http://jsfiddle.net/d0okie0612/22cTn/</a></p>

<p>Im trying to get the box to appear on top of the button but on the bottom of the exisiting div box.  </p>

<pre><code>  &lt;div id="top_form"&gt;
  &lt;form&gt;
    Street: &lt;input name="titles[]" type="text" placeholder="eg: 123 Fake st."&gt;&lt;br&gt;&lt;br&gt;
    City: &lt;input name="titles[]" type="text" placeholder="eg: Bellflower"&gt;
    &lt;select&gt;
    &lt;option value=" "&gt;State&lt;/option&gt;
    &lt;option value="ca"&gt;CA&lt;/option&gt;
    &lt;option value="az"&gt;AZ&lt;/option&gt;
    &lt;option value="de"&gt;DE&lt;/option&gt;
  &lt;/select&gt;
     Zip: &lt;input name="titles[]" type="text" placeholder="eg: 91745"&gt;&lt;br /&gt;

 &lt;/form&gt;

 &lt;/div&gt;
    &lt;br /&gt;
 &lt;a id="awsomeButton" href="#"&gt;+ Add Loction&lt;/a&gt;
</code></pre>

<p>Heres the script</p>

<pre><code>var tpl = ""
 + "&lt;div id='location_div_&lt;%= id %&gt;'&gt;&lt;h1&gt;My Location #&lt;%= id %&gt;&lt;/h1&gt;&lt;/div&gt;";

  var newId = new Date().getTime();
 var template = _.template(tpl);
   var compiled = template({id: newId});

 var form = ""
+ "&lt;div id='added_form'&gt;&lt;a href='#' class='close_btn'&gt;x&lt;/a&gt;&lt;form&gt; Street: &lt;input       name='titles' type='text'&gt;&lt;br /&gt;&lt;br /&gt;City: &lt;input name='titles' type='text'&gt;&lt;select&gt;&lt;option value=' '&gt;State&lt;/option&gt;&lt;option value='ca'&gt;CA&lt;/option&gt;&lt;/select&gt;Zip: &lt;input name='titles' type='text'&gt;&lt;/form&gt;&lt;/div&gt;"


 $('#awsomeButton').on('click', 
    function(e){
    $(form).hide().appendTo('body').fadeIn('slow');
});
</code></pre>
