How to fix multiple appending in the div using jquery

Question

I have problem regarding on appending a sample a href to the div or to the html elements, I have only 3 array response to my ajax, however the results shows duplicate item to the corresponding div. I will share to you guys my sample code that already made,

I have here my backend php:

    <?php 
    require_once('../ConnectionString/require_db.php');
    session_start();
    //submit function
    $status = 'Active';
    $posttype_affiliation_page = 'affiliation_page';
    $posttype_member_org_page = 'member_org_page';
    $affiliation_member_org_content = $db->prepare('SELECT title,link,posttype FROM tblcontent 
    WHERE status = ? AND posttype = ? OR posttype = ? ORDER BY contentID DESC') 
    or die($db->error);

    $affiliation_member_org_content->bind_param('sss',$status,$posttype_affiliation_page,$posttype_member_org_page);
    $affiliation_member_org_content->execute();
    $affiliation_member_org_content->bind_result($title,$link,$posttype);
    $result = array();

    while ($affiliation_member_org_content->fetch()) {
        $result[] = array('title'=>$title,'link'=>$link,'posttype'=>$posttype);
       header('Content-type: application/json');

   }

    echo json_encode($result);

?>

my front end:

    $(document).ready(function(){
        //mission vision
        $.ajax({
        url:'./Function/fetch_affiliation_member_org.php',
        type:'get',
        success:function(response_fetch_affiliation_member_org) {
                console.log(response_fetch_affiliation_member_org);
                var fetch_affiliation_member_org = jQuery.parseJSON(JSON.stringify(response_fetch_affiliation_member_org));
                $.each(fetch_affiliation_member_org,function(i,data){
                        if(data.posttype == 'affiliation_page') {
                                const title = data.title;
                                const link = data.link;
                                var data = "";
                                data = '<p style="font-size:14px;" class="list_affiliation_links"><a href='+link+'>'+title+'</a></p>';
                                $('p.list_affiliation_links').append(data);

                        }
                        else if(data.posttype == 'member_org_page') {
                                const title = data.title;
                                const link = data.link;
                                var data = "";
                                data = '<p style="font-size:14px;" class="list_member_org_links"><a href='+link+'>'+title+'</a></p>';
                                $('p.list_member_org_links').append(data);
                        } 

                });

        },
        error:function(error) {
                console.log(error);
        }
        });
});

My Html:

<div class="Affiliation">
                    <h5>Affiliation</h5>

                    <p style="font-size:14px;" class="list_affiliation_links">

                    </p>
                </div>
                <br>
                <div class="Member">
                    <h5>Member Organizations</h5>
                    <p style="font-size:14px;" class="list_member_org_links">

                    </p>
                </div>

Answer 1

 $(document).ready(function(){
        //mission vision
        $.ajax({
        url:'./Function/fetch_affiliation_member_org.php',
        type:'get',
        success:function(response_fetch_affiliation_member_org) {
                console.log(response_fetch_affiliation_member_org);
                var fetch_affiliation_member_org = jQuery.parseJSON(JSON.stringify(response_fetch_affiliation_member_org));
                $.each(fetch_affiliation_member_org,function(i,data){
                        if(data.posttype == 'affiliation_page') {
                                const title = data.title;
                                const link = data.link;
                                var data = "";
                                $('p.list_affiliation_links').html('');
                                data = '<p style="font-size:14px;" class="list_affiliation_links"><a href='+link+'>'+title+'</a></p>';
                                $('p.list_affiliation_links').append(data);

                        }
                        else if(data.posttype == 'member_org_page') {
                                const title = data.title;
                                const link = data.link;
                                var data = "";
                                $('p.list_member_org_links').html('');
                                data = '<p style="font-size:14px;" class="list_member_org_links"><a href='+link+'>'+title+'</a></p>';
                                $('p.list_member_org_links').append(data);
                        } 

                });

        },
        error:function(error) {
                console.log(error);
        }
        });
});

You should first clear html content and then set to DOM element. Might be it works for you.

Answer 2

you're appending a second p tag with your HTML that also gets selected in your append later in the code. You should only build the link withing the var data.

Greetings