I have a list of items on a webpage. I would like to load a form via Ajax each time I click on any item in the list. The HTML looks like this:

```
<div class="item">
    <... some html code for the first item ...>
</div>
</div class="item">
    <... some html code for the next item ...>
</div>
etc..

```

My goal is that if the user clicks on the first "item-div" a form shall be loaded using AJAX. The loaded form shall be inserted after the "item-div"... something like this:

```
<div class="item">
    <... some html code for the first item ...>
</div>
<form>
    <... some html code for the form... loaded via AJAX...>
</form>
</div class="item">
    <... some html code for the next item ...>
</div>
etc..

```

I can't understand why this won't work. Here is my jQuery code:

```
$(document).ready(function(){
  $(".item").click(function(){
    $(this).after().load("loadform.php");
  });
});

```

The Ajax-load function overwrites the inner `<... some html code... >` instead of adding it after the "item-div". What is wrong? How can I solve it?