JQuery .load() method returns values twice

Question

So I'm trying to load data from another page in my site, specifically a course progress (from a LearnPress course, this is a WP site for what it's worth) to a div in my page.

To do so, I'm doing:

$( document ).ready(function() {
   
    $("#my_div_1").load( "www.mysite.com/course-1 .learn-press-course-results-progress"
);
$("#my_div_2").load( "www.mysite.com/course-2 .learn-press-course-results-progress"
);
});

Which indeed displays the data I kneed. However, it displays it twice:

I reckon this has something to do with the fact that .load() is firing up twice because of...reasons? In any case, how can I make it so that this doesn't happen? I thought of a solution in the realm of:

$( document ).ready(function() {
   
    for (i = 0; i < 1; i++) {
    $("#div_id").load( "www.mysite.com/course-page .learn-press-course-results-progress"
);
};
});

Which doesn't work, but I reckon could be some sort of solution. However, it doesn't seem to be the "correct" one.

Also important to note: In the example I have two courses, in fact I have to do this for something like 12 courses, but it happens even with only one.

Thanks!

Answer 1

It's more likely that you are running the script twice, take a look at jQuery $(document).ready () fires twice