I need to change the innerHTML by using getElementByID but it's not working properly. The first works but ignores the second

Question

I need to change the innerhtml within the first ID called "title." That will change accordingly but the innerhtml within "title2" needs to change also but doesn't. here's the code below

    $(document).ready(function () {
var dnnCopy = document.getElementById('title');
var str = document.getElementById('title').innerHTML;
var Obj = {
'Charge Nurse Leadership Fundamentals': "Leadership Fundamentals for Nurse Leaders",
'Critical Thinking Skills For Charge Nurses': "Critical Thinking for Nurse Leaders",



};
dnnCopy.innerHTML = str.replace(/Charge Nurse Leadership Fundamentals|Critical Thinking Skills For Charge Nurses/gi, function (matched) {
return Obj[matched];
});
});





$(document).ready(function () {
var dnnCopy = document.getElementById('title2');
var str = document.getElementById('title2').innerHTML;
var Obj = {
'Critical Thinking Skills For Charge Nurses': "Critical Thinking Skills for Nurse Leaders",




};
dnnCopy.innerHTML = str.replace(/Critical Thinking Skills For Charge Nurses/gi, function (matched) {
return Obj[matched];
});
});