jquery add class to class and ajax load new content - html

Question

the idea is list and grid classs.
example code:
$(document).ready(function(){
$(".cfredcf").on('click', function() {
$('.course-title-cf').removeClass('cfbluecf-p');
$('.course-title-cf').addClass('cfredcf-p');
});
$(".cfbluecf").on('click', function() {
$('.course-title-cf').removeClass('cfredcf-p');
$('.course-title-cf').addClass('cfbluecf-p');
});
});
.cfredcf-p{
color:red;
}
.cfbluecf-p{
color:blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="cfredcf" style="color:red;">red</p>
<p class="cfbluecf" style="color:blue;">blue</p>
<hr />
<p class="course-title-cf">Title Example</p>
<p class="course-title-cf">Title Example</p>
<p class="course-title-cf">Title Example</p>
<hr />
the code working fine until now but when get more (Title Example) from the database by ajax and already choose red the new results is not coming with red i must click on red again !.
the new title or results comming from database:
it will be like that
<hr />
<p class="course-title-cf">Title Example</p>
<hr />
but not geting withe new add class i must click agin to add.

Answer 1

In fact, it would be more effective to add (AJAX) codes and see the scenarios, but,
A lot of solutions come to mind, but if you ask what is the smartest, fastest and easiest one, I would make a <div> element that wraps all these <p> elements. And until I color each <p>, I would do <div class = "cfredcf-p / cfbluecf-p">. Then my css is .cfredcf-p p {color: red;} I would rearrange it as.
$(document).ready(function() {
$(".cfredcf").on('click', function() {
$('.course-title-cf').removeClass('cfbluecf-p');
$('.course-title-cf').addClass('cfredcf-p');
});
$(".cfbluecf").on('click', function() {
$('.course-title-cf').removeClass('cfredcf-p');
$('.course-title-cf').addClass('cfbluecf-p');
});
$("button").on('click', function() {
$('.course-title-cf').append("<p>Title Example</p>");
});
});
.cfredcf-p p {
color: red;
}
.cfbluecf-p p {
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="cfredcf" style="color:red;">red</p>
<p class="cfbluecf" style="color:blue;">blue</p>
<button>Add new</button>
<hr />
<div class="course-title-cf">
<p>Title Example</p>
<p>Title Example</p>
<p>Title Example</p>
</div>
<hr />
Thus, every new <p> element inserted inside the wrapper element will take the same color.