Appending div to the form disappears automatically

Question

I have a form, I want to append a entire div every time a button is clicked. The code works but after few seconds the appended div automatically disappears. don't get any errors.

I am using jQuery 2.1.3. Here is my code in JS Fiddle:

https://jsfiddle.net/sathyabaman/jgdLtu4d/

My code:

    <form method="POST" id="form_property" enctype="multipart/form-data">
        <div class="row">
            <div class="span4" id="image">
                 <h3><strong>4.</strong> <span>Add Images to your Property (Maximum : 6 Images)</span></h3>

                <div id="clone_image" class="fileupload fileupload-new ">
                    <label class="control-label">Image file</label>
                    <div class="input-append">
                        <div class="uneditable-input"> <i class="icon-file fileupload-exists"></i>
     <span class="fileupload-preview"></span>

                        </div> <span class="btn btn-file">
                                            <span class="fileupload-new">Select file</span>
     <span class="fileupload-exists">Change</span>

                        <input type="file" name="files1" accept="image/*" />
                        </span>
                    </div>
                </div>
            </div>
            <!-- /.span4 -->
        </div>
        <!-- /.row -->
        <br/> <a id="another_image" class="btn btn-primary btn-small list-your-property" href="">Add Another Image</a>
        <br/>
        <br/>
        <input type="submit" name="submit" value=" Save images " class="btn btn-primary btn-large" style="float: left; width: 370px; height: 50px; margin-top: 10px">
    </form>

jquery

        $(document).ready(function(){


            var count = 2;
            $('#another_image').click (function(){
                var clonedEl = $('#clone_image').first().clone()
                clonedEl.find(':file').attr('name','files'+count)
                if(count < 7){
                    if(count == 6){ $('#another_image').hide();}
                    $(clonedEl).appendTo("#image");
                count++;
                }
            });
            });

Thank you..

Answer 1

You need to prevent the default action of the anchor click, which is to navigate to the target page.

Since you have specified an empty href it reloads the same page that is why you can see the new element and then it appears to be disappearing.

$(document).ready(function () {

    var count = 2;
    $('#another_image').click(function (e) {
        //e.preventDefault()
        var clonedEl = $('#clone_image').first().clone()
        clonedEl.find(':file').attr('name', 'files' + count)
        if (count < 7) {
            if (count == 6) {
                $('#another_image').hide();
            }
            $(clonedEl).appendTo("#image");
            count++;
        }
    });
});

Demo: Fiddle