jQuery Forum

On THIS page I have a bunch of "placeholders" for phone numbers in the form: 07xxxxxxxx. Upon clicking the green button "VEZI TELEFON", the placeholder in each green box is replaced with a real phone number from a JSON file, via $.ajax. The console strangely shows 2 different things on desktop and mobile. The value of index is different it seams... Desktop:

0: 0743127315
1: 072245875
3: 0756129668
4: 0724153333
Uncaught TypeError: Cannot read property 'tel' of undefined

Mobile:

1: 072245875
2: 0756129458
4: 0724153333
Uncaught TypeError: Cannot read property 'tel' of undefined

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

The JS code:

function showTel() {
    $(".telefon").on('click', function(){
        var index = $(this).closest(".imobil").index();
        var $element = $(this);
        $.ajax({
            url: 'telefoane.json',
            dataType: 'json',
            type : 'get',
            cache : 'false',
            success: function(data){
                var tel = data.telefoane[index].tel;
                console.log(index + ": " + tel);
                $element.parent().find('.telefon .tel').text(tel);
            }
        });
    });
}
showTel();

// Arata telefon
$('.telefon').on('click', function(){
    $(this).children('.vezi').hide();
    $(this).children('.tel').show();
});

What is wrong with this code? Thank you!