Question

I have a main div on two pages ie page1.php and form.php

page1.php

<div class="main_div">
    <?php require('form.php'); ?>
</div>

<script>
    $(".add_one").click(function(){
        $(".main_div").insertAfter(".single_div").load('form.php');
    });
</script>

form.php

<div class="single_div">
    <table>
        <tr>
            <td><input type="text" class="text1" /></td>
            <td><input type="button" class="add_one" value="Add" /></td>
            <td>Some other fields too</td>
        </tr>
    </table>
</div>

css.css

.single_div {
    background-color: green;
    float: left;
    margin-left: 10px;
}

Now when i click on Add button, its not adding other form / div class='single_class' next to it… but it disappers

And when i check with inspect element of Chrome Developer Tool, theres nothing.. whole body is empty except javascript

Now how can i add page load option on click of button, next to it.

Edited / Added

http://jsfiddle.net/marafee1243/ErN5E/

the above fiddle may not be apporiate…

Answer 1

$(".main_div").insertAfter(".single_div").load('form.php');

Inserts .main_div after .single_div, which doesn’t make sense

.insertAfter( target )
target: A selector, element, HTML string, or jQuery object; the matched set of elements will be inserted after the element(s) specified by this parameter.

I think you want something like that:

$('.single_div').eq(0).clone(true).appendTo('.main_div');