Populate span tag(s) with data from a json file

Populate span tag(s) with data from a json file

On  THIS  page, I have listed some dummy estates and hard-coded, for each one, a span (with the text "VEZI TELEFON") that when clicked, reveals a phone number. I want every phone number to be retrieved from a JSON (or PHP) file called  telefoane.json  that has the content: 


         {
         "telefoane":[{
         "id":"1",
         "tel":"0743127315"
         },
         {
         "id":"2",
         "tel":"072245875"
         },
         {
         "id":"3",
         "tel":"0756129458"
         },
         {
         "id":"4",
         "tel":"0725127216"
         },
         {
         "id":"5",
         "tel":"0723127322"
         }]

My code, that can be seen below does not output the desired result:

$.ajax({
    url: 'telefoane.json',
    dataType: 'json',
    success: function(data){
        $.each(data.telefoane, function() {
            console.log(this.id + ": " + this.tel);
        });
    }
});

What am I doing wrong? Thank you!