Dynamic looping div

Dynamic looping div

Hi, apologies for asking for help on my first post

I'd like to automate the code below so that I don't have to manually add a new function each time.

I have a div with a class team, within the team div there is an hours class that increments by 1 every time.

  1.       individual_sum1 = 0;
            $(".team .hours1").each(function(){
                value1 =  $(this).data("distance");
                individual_sum1 = individual_sum1 + value1;
       
                $(".team .individual_hours1").text(individual_sum1);
            });
           
            individual_sum2 = 0;
            $(".team .hours2").each(function(){
                value2 =  $(this).data("distance");
                individual_sum2 = individual_sum2 + value2;
       
                $(".team .individual_hours2").text(individual_sum2);
            });
           
            individual_sum3 = 0;
            $(".team .hours3").each(function(){
                value3 =  $(this).data("distance");
                individual_sum3 = individual_sum3 + value3;
       
                $(".team .individual_hours3").text(individual_sum3);
            });
What I'd like if for code below to be automated and increment by 1 for each team div.
  1.       individual_sum1 = 0;
            $(".team .hours1").each(function(){
                value1 =  $(this).data("distance");
                individual_sum1 = individual_sum1 + value1;
       
                $(".team .individual_hours1").text(individual_sum1);
            });
Hope this makes sense.

Thanks and regards

Wayne.