Ajax jQuery firing multiple time display event for the same result

Question

What I'm trying to do, is to simply display 5 posts returned from WordPress. What jQuery does is that it displays me this 5 posts, 7 times.

Inside my_response.posts looks like:

Maybe my function is wrong, or I should remember about something, when doing ajax request to WordPress.

Any idea why this happens?

 jQuery('span.main-nav-text').click(function(ev) {
        ev.preventDefault();
        //var slug = '';
        //var trimmed = jQuery.trim(jQuery(this).parent().children()[0].innerHTML);
        //slug = trimmed.replace(/[^a-z0-9-]/gi, '-').
        //    replace(/-+/g, '-').
        //    replace(/^-|-$/g, '');
        // Information of our Request
        var data = {
            type:"POST",
            'action': 'fyc_qet_menu_option',
            'post_type': 'blog',
            'qty': -1
        };
        jQuery.post( callajax.ajaxurl,data).done(
            function (response){
                var cipka=[];
                jQuery('div.blog-entry').empty();
                console.log(response);
                var my_response =jQuery.parseJSON(response);
                console.log(my_response.posts);
                for(var i=0;i<my_response.posts.length;i++)
                {

                    jQuery('div.blog-entry').html(my_response.posts[i]["post_date"]);
                    jQuery('div.blog-entry').html(my_response.posts[i]["post_title"]);
                    jQuery('div.blog-entry').html(my_response.posts[i]["post_content"]);
                }
             //   jQuery.each(my_response.posts,function(index,element){
             ////   console.log(element["post_title"]);
             //       cipka.push("<a href="+element["guid"]+">");
             //       cipka.push(element["post_title"]+"<br />");
             //       cipka.push(element["post_content"].substring(0,220)+"...<br />");
             //       cipka.push("</a>");
             //   });

            }
        );

    });

Answer 1

Here ho i have change the index.php  template

            <?php get_template_part('inc/content'); ?>

        <?php endwhile; else : ?>
        <div class="margint30"><h4><?php echo __('Not Post Found!','2035Themes-fm') ?></h4></div>
        <?php endif; ?>
        <?php Theme2035_pagination(); ?>
            </div>

and here how i have changed jQuery function:

jQuery('span.main-nav-text').click(function(ev) {
    ev.preventDefault();
    //var slug = '';
    //var trimmed = jQuery.trim(jQuery(this).parent().children()[0].innerHTML);
    //slug = trimmed.replace(/[^a-z0-9-]/gi, '-').
    //    replace(/-+/g, '-').
    //    replace(/^-|-$/g, '');
    // Information of our Request
    var data = {
        type:"POST",
        'action': 'fyc_qet_menu_option',
        'post_type': 'blog',
        'qty': -1
    };
    jQuery.post( callajax.ajaxurl,data).done(
        function (response){
            var cipka=[];
            jQuery('div.dynamic-blog-posts').empty();
            console.log(response);
            var my_response =jQuery.parseJSON(response);
            console.log(my_response.posts);
            for(var i=0;i<my_response.posts.length;i++)
            {

                jQuery('div.dynamic-blog-posts').html(my_response.posts[i]["post_date"]);
                jQuery('div.dynamic-blog-posts').html(my_response.posts[i]["post_title"]);
                jQuery('div.dynamic-blog-posts').html(my_response.posts[i]["post_content"]);
            }
            //   jQuery.each(my_response.posts,function(index,element){
            ////   console.log(element["post_title"]);
            //       cipka.push("<a href="+element["guid"]+">");
            //       cipka.push(element["post_title"]+"<br />");
            //       cipka.push(element["post_content"].substring(0,220)+"...<br />");
            //       cipka.push("</a>");
            //   });

        }
    );

});