appending code from two functions jquery

appending code from two functions jquery

hi
to start here is a copy of my code

  1. var userid ='UCLdin3PebPaIVQdIC7Lp-kg';
    var devkey ='*****************';



    $(document).ready(function(){
        $.get(
            "https://www.googleapis.com/youtube/v3/channels",{
                part: 'contentDetails',
                id: userid,
                key: devkey},
                function(data){
                    $.each(data.items, function(i, item){
                        pid = item.contentDetails.relatedPlaylists.uploads;
                        getVids(pid);
                     })
                }
        );

        function getVids(pid){
            $.get(
                "https://www.googleapis.com/youtube/v3/playlistItems",{
                    part: 'snippet',
                    playlistId: pid,
                    key: devkey},
                function(data){
                    $.each(data.items, function(i, item){
                        videoTitle = item.snippet.title;
                        videoid = item.snippet.resourceId.videoId;
                        getdur(videoid);
                        videoimg = item.snippet.thumbnails.maxres.url;
                        videodesc = item.snippet.description;

                        var name ='<h4 class="modal-title">'+videoTitle+'</h4>';
                        var thumb ='<div class="ctr col-md-3 col-xs-12 ythumb"><a data-toggle="modal" href="#'+videoid+'"><img class="img-responsive" src="'+videoimg+'"></a></div>';
                        var desc ='<div>'+videodesc+'</div>';
                        var video ='<iframe src\"//www.youtube.com/embed/'+videoid+'\"></>';



                    })
                }
            );
        }
        function getdur(videoid){
            $.get(
                "https://www.googleapis.com/youtube/v3/videos", {
                    part:'contentDetails',
                    id: videoid,
                    key: devkey},
                function(data){
                    $.each(data.items, function(i, item){
                        videodur = item.contentDetails.duration;
                        videolength = videodur.replace("PT","").replace("H",":").replace("M",":").replace("S","");

                        var Duration ='<div id="length" class="ytime header cat_bar"><h3 class="catbg">'+videolength+'</h3></div>';


                         thumblen ='<div class="col-md-3 col-xs-12 pad-5"><div class="ctr col-md-3 col-md-12 ythumb"><a data-toggle="modal" href="#'+videoid+'"><img class="img-responsive" src="'+videoimg+'"></a></div><div id="length" class="ytime header cat_bar"><h3 class="catbg">'+videolength+'</h3></div></div>'
                        $('#thumb-len').append(thumblen);
                    })
                }
            );
        }
    });
and what I'm trying to do is get the image from var thumb and var duration and output them both in the same div 


here is how i was planning it to work:
https://jsfiddle.net/wpqfm891/3/

here is what i'm currently getting
http://beta.mdl-palissy.fr/youtube.php

may i also add the this will be done using bootstrap (I'll modify the codes to get the correct classes from he css)
for info (as written in the code) the image will be in a link (the duration also would be a bonus), this link will be linked to a modal that will show when the link is clicked like this
http://jsfiddle.net/xK24S/61/

is there a way i could possibly do that ?
cause at the moment it isn't really working

any help would be much appreciated
surely this can't be that hard to do ...