JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div>
        <p class="testClass">測試1<span>子元素1</span>
        </p>
    </div>
    <br>
    <div class="testClass">
        <p class="testClass">測試2<span>子元素2</span>
        </p>
    </div>
    <button id="test1">Test 1</button>
    <button id="test2">Test 2</button>
    <button id="reset">Reset</button>
</body>

CSS

.testClass{
    border: 1px solid #000;
 }

JavaScript

$(document).ready(function () {
    $("#test1").click(function () {
        $("div").find('p:first').css("border-color", "#FF9D37");

    });

    $("#test2").click(function () {
        $("div p:first").css("border-color", "#FF9D37");
    });

    $("#reset").click(function () {
        $("p").css("border-color", "#000");
    });
});