JSFiddle - React, Tailwind, and code Playground

HTML

<div class="engagement_app">
    <p>Without id</p>
    <p>Without id</p>
    <p id="p1">With id</p>
    <p>Without id</p>
    <p id="p2">With id</p>
    <p id="p3">With id</p>
    <p id="p4">With id</p>
</div>
<button id="clear">Clear</button>
<button id="without">Without IDs</button>
<button id="with">With IDs</button>

JavaScript

function clear() {
    $('.engagement_app p').css('color','black');
}

$(function() {
    $('#clear').click(function() {
        clear();
    });
    
    $('#without').click(function() {
        clear();
        $('.engagement_app p:not([id])').css('color','red');
    });
    
    $('#with').click(function() {
        clear();
        $('.engagement_app p[id]').css('color','red');
    });
});