Compare two separate files for similar elements?

Compare two separate files for similar elements?

Hi friends,
 I have two files.    oldCourses.html and newCourses.html.

oldCourses.html has elements

<div id="courses-details">
          <div> 
       <div colspan="4"><b>2017 School Courses</b></div>
          </div>
            <div>
            <span>1.</span>
            <span>History</span>
            <span data-content-type="history" data-key="1" teacher-value="John"> John</span>
          </div> 
<div>
            <span>2.</span>
            <span>Sciences</span>
            <span i data-content-type="sciences" data-key="2" teacher-value="James"> John</span>
          </div>
</div>

newCourses.html has elements

<div id="courses-details">
          <div> 
       <div colspan="4"><b>2017 School Courses</b></div>
          </div>
            <div>
            <span>1.</span>
            <span>History</span>
            <span i data-content-type="history" data-key="1" teacher-value="John"> John</span>
          </div> 
<div>
            <span>2.</span>
            <span>Sciences</span>
            <span  data-content-type="sciences" data-key="2" teacher-value="Jimmy"> John</span>
          </div>
</div>





What  I basically want to achieve is  compare both the files by data-key and data-content-type and check to see if the teacher-value has changed in the newCourses.html  and then add a class .valueHasChanged to the changed span in the oldCourses.html.

In the above example sciences teacher-value has changed  from James to Jimmy. In that case oldCourses.html span containing : data-content-type="sciences" data-key="2" should have the class .valueHasChanged.


Thank you in advance..