I'm stuck & I need your help please.
I'm building a front-end for a quiz. For some reason, the back-end provides 3 json files.
JSON1 gives me category and title (<https://api.myjson.com/bins/nilct>). JSON2 gives me questions (<https://api.myjson.com/bins/1178p1>). JSON3 possible answers (<https://api.myjson.com/bins/qhft1>). 

I need to loop through JSON1 and write categories and titles. Loop through JSON2 and write the question for that title. Loop through JSON3 and write possible answers for each question.

This is my html file:

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>quiz</title>
</head>
<body>
    <div id="bigMain" class="hide">

    </div>  

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="js/refactor3.js"></script>
</body>
</html>

```

This is my JavaScript file:

```
var request1 = $.ajax({
    url: 'https://api.myjson.com/bins/nilct',
    dataType: 'json',
    type: 'get',
    cache: false,
    success: function(data) {

        var key, jsoncount = 0;
        for(key in data) {
            if(data.hasOwnProperty(key)) {
                jsoncount++;
            }
        }
        $(data).each(function(index, value){
            var categoryId = value.id;
            var catCategory = value.category;
            var catHeader = value.header;
            var catOrderNum = value.question;

            var getSectionPlace = document.getElementById('bigMain');
            var maturidadeSection = 
                '<section id="' + categoryId + '">\
                    <div class="section-top">\
                        <p class="title optionsTitle '+ catCategory +' titleFor_'+ categoryId + '">\
                        ' + catCategory + '\
                        </p>\
                        <hr class="hideOnMobile">\
                        <h1 class="top-title">'+ catHeader +'</h1>\
                    </div>\
                    <div class="section-bottom">\
                    And this is bottom div\
                    </div>\
                </section>';

        function makeSections(){
            $( maturidadeSection ).appendTo( getSectionPlace );
        }
        makeSections();

        });
    }
}),

request2 = $.ajax({
        url: 'https://api.myjson.com/bins/1178p1',
        dataType: 'json',
        type: 'get',
        cache: false,
        success: function(data) {
            //console.table(data);
            var key, jsoncount = 0;
            for(key in data) {
                if(data.hasOwnProperty(key)) {
                jsoncount++;

                }
            }

            $(data).each(function(index, value){
                var questionId = value.id;
                var questionText = value.question;
                var questionOrderNum = value.orderNum;
                var questionType = value.type;
                var questionBelongsTo = value.category_id;

    /**
     * Get the place to put content inside sections and place it
     */
            var getQuestionPlace = document.getElementsByClassName('section-bottom');
            var questionToPlace = '<div class="question question' + questionBelongsTo + '">\
                                        <p class="questionP questionId_'+questionId+'">\
                                            ' + questionText + 
                                        '</p>\
                                        <ul id="questionId-'+ questionId +'" class="answerContainer">\
                                            <li>TESTS</li>\
                                        </ul>\
                                   </div>'

                                   function makeQuestions(){
                                       $( questionToPlace ).appendTo( getQuestionPlace );
                                    }
                                    makeQuestions();

            });

        }    
    }),
request3 = $.ajax({
    url: 'https://api.myjson.com/bins/qhft1',
    dataType: 'json',
    type: 'get',
    cache: false,
    success: function(data) {
        var key, jsoncount = 0;
        for(key in data) {
            if(data.hasOwnProperty(key)) {
            jsoncount++;
            }
        }

        $(data).each(function(index, value){
            var answerId = value.id;
            var answerText = value.answer;
            var answerOrderNum = value.orderNum;

    /**
     * Get the place to put content inside sections and place it
     */
            var getAnswerPlace = document.getElementsByClassName('answerContainer');
            var answerToPlace = '<li><input type="radio" name="'+ answerOrderNum +'" value="'+ answerText +'">\
                                    '+ answerText +'\
                                </li>'

                                   function makeAnswers(){
                                       $( answerToPlace ).appendTo( getAnswerPlace );
                                    }
                                    makeAnswers();

            });
        }    
    });

```

But this is not working as I can't seem to controll what happens in what loop and is getting a big mess.

Can anyone help me with a way to do this? And having all data from one JSON is not available. 

Thanks in adavnce!