<div class="" id="popup">
    <div class="close"><i class="fa fa-2x fa-times-circle"></i></div>
    <h2></h2>
    <div class='location field'></div>
    <div class='enrollment field'></div>
    <div class='tuition field'></div>
    <div class='history field'></div>
    <div class='fact field'></div>
    <div class='alumni field'></div>

    <div class="videos"></div>
    <div class="images"></div>
    <div class="endnote field"></div>
    <div class="prose field"></div>
</div>

$.getJSON( school + "/data.json", function( data ) {
             $('.images').empty();
                         $('.videos').empty();
                          $('.field').empty();

                         var location, enrollment, tuition, history, alumni, fact, prose;
                         location = data.location;
                         enrollment = data.enrollment;
                         tuition = data.tuition;
                         history = data.history;
                         fact = data.fact;
                         alumni = data.alumni;
                         prose = data.prose;


                        $('.location').html('<strong>Location</strong>: ' + location );
                         $('.enrollment').html('<strong>Enrollment</strong>: ' + enrollment);
                          $('.tuition').html('<strong>Undergraduate tuition</strong>: ' + tuition);
                          $('.history').html('<strong>History</strong>: ' + history );
                          $('.fact').html('<strong>Notable fact:</strong> ' + fact );
                         $('.alumni').html('<strong>Prominent alumni</strong>: ' + alumni );
                         $('.prose').html(prose);
});

{
    "images": {

    },
    "captions": {

    },
    "videos": {

    },
    "vidcaptions": {
    },
    "location": "",
    "enrollment": "",
    "tuition": "",
    "history": "",
    "alumni": "",
    "fact": "",
    "prose": ""

}