Update DIV Classes with AJAX Json Array Result

I have a Ajax Json Array result made of Divs in DOM. I want to update the existing DOM data with the new Ajax Json Result. The DOM data and the Ajax data both have a id number that can be used to match. I used to have the form within the div, so it was easy to update because all I had to do was use $(this) or $(this)closest. Now I have moved the Ajax Get form to outside the Div $(this) or $(this)closest does not work.

I need a method to relate the data and then apply the data based on the id to id relationship or whatever you can recomend. Thank you. Below is where I have got to so far. The Ajax result update data below it shows the person with id:2 surname as Wright. I want to update the DIV. In a nutshell update each record with its update data. Thank you for any help.

<form  class="updateform"  action="" method="" >    
<input type="hidden" class ="customers"  name="" value="<?php echo $mycustomers; ?>">
<a class="update-button"></a>
</form> 

var Ajaxresultdata = [
 {id:1,name:"Mike",surname:"Rynes"},
 {id:2,name:"James",surname:"Wright"},
 {id:3,name:"Helen",surname:"Bills},
 ];

Div rows are json Array result
<div  class="mycustomers">
<div id="1" class ="name">Mike </div><div>="class="surname">Rynes</div>  
<div id="2">class ="name"> James</div><div>="class="surname">Bond</div> 
<div id="3">class ="name"> Helen</div><div>="class="surname">Bills</div> 
</div>

<script>



    var Ajaxresultdata = [
   {id:1,name:"Mike",surname:"Rynes"},
   {id:2,name:"James",surname:"Bond"},
   {id:3,name:"Helen",surname:"Bills},
   ];

    $.each(ajaxresultdata, function( i, person ) {
    
   if(document.getElementById(person.surname)){

   $("#divid").find('.surname').html(person.surname);
    
    }
     });

</script>