Problems with JSON data can't get it rendered on template

Question

I have the models.py with employee and all the info. With one click i want to render all the info of my employee.

the thing is, I have 2 columns one for names and one for information. when i click a name the right column has to come up with the array with name last name..... i can see it on the console but i can't get it rendered. Think i have problems with the key but i dont know. here is the code..

views.py in this function i want to get the id of the name by jsonloads by clicking the name and filter the employe with it.(this works)

      def check(request):
         if request:
          if request.method == 'POST':
            data = json.loads(request.body)
            employeId = data['id_s']
            empinfo = Employe.objects.filter(id=employeId)
            print(empinfo)
            print(data)
            return JsonResponse({'data': list(empinfo.values())}, safe=False, status=200)
         return HttpResponse()

js code is here. in these code i want to get the data by fetch url. i can see it on the console log that the data is recieved(these function works good aswel)

      function checkEmp(id_s, action){
        var url = '/checks/'
        fetch(url, {
        method: 'POST',
        headers:{
         'Content-Type':'application/json',
         'X-CSRFToken': csrftoken,
          },
         body:JSON.stringify({'id_s': id_s, 'action': action})
         })
         .then((response)=>{
            return response.json()
          })
         .then((data)=>{
            console.log(data);
          })
          }

index.html i think that the problem is here. i want that these function would get the data of fetch and render it on the template(dont work)

---

      $(document).ready(function() {
      $(".info-employe").click(function(event){
      $.getJSON('/checks/', function(response, data) {
       for(var key in response.data )
      $('#name').append('<p> Name: ' + response.data[key].name + '</p>');
      $('#surname').append('<p>Surname : ' + response.data[key].surname + '</p>');
      $('#worknumber').append('<p> Work number: ' + response.data[key].work_number + '</p>');
      $('#workplace').append('<p> Rank: ' + response.data[key].rank + '</p>');
      $('#rank').append('<p> Workplace: ' + response.data[key].workplace + '</p>');
      $('#email').append('<p> Email: ' + response.info[key].email + '</p>');
      $('#phone').append('<p> Phone: ' + response.data[key].phone + '</p>');
      });
      });
      });

am 4 monts in tho code and maybe i miss one thing that i need to learn in these task. can someone give me a tip what i miss here, or what i need to learn if i want use these sort functions. thanks alot and srry for my bad english :)))