JSFiddle - React, Tailwind, and code Playground

HTML

<div id="new_results">
    <div class="new_result">
        <div class="new_result_header">
            <h3>Acura ILX</h3>
        </div>
        <div class="new_trim_dropdown">
            <p>Available Trims - <span>3</span>
            </p>
            <ul class="new_trim_values">
                <li>4dr Sedan (2.0L 4cyl 5A)</li>
                <li>4dr Sedan w/Premium Package (2.4L 4cyl 6M)</li>
                <li>44dr Sedan w/Premium Package (2.0L 4cyl 5A)</li>
            </ul>
        </div>
    </div>
    <div class="new_result">
        <div class="new_result_header">
            <h3>Acura ILX Hybrid</h3>
        </div>
        <div class="new_trim_dropdown">
            <p>Available Trims - <span>3</span>
            </p>
            <ul class="new_trim_values">
                <li>4dr Sedan (2.0L 4cyl 5A)</li>
                <li>4dr Sedan w/Premium Package (2.4L 4cyl 6M)</li>
                <li>44dr Sedan w/Premium Package (2.0L 4cyl 5A)</li>
            </ul>
        </div>
    </div>
    <div class="new_result">
        <div class="new_result_header">
            <h3>Acura MDX</h3>
        </div>
        <div class="new_trim_dropdown">
            <p>Available Trims - <span>3</span>
            </p>
            <ul class="new_trim_values">
                <li>4dr Sedan (2.0L 4cyl 5A)</li>
                <li>4dr Sedan w/Premium Package (2.4L 4cyl 6M)</li>
                <li>44dr Sedan w/Premium Package (2.0L 4cyl 5A)</li>
            </ul>
        </div>
    </div>
</div>

CSS

.new_result {
    border:1px solid red;
    margin-bottom:25px;
}
#new_results .new_trim_values {
    display:none;
}

JavaScript

$(document).on("click", ".new_trim_dropdown", function (event) {
    event.stopPropagation();
    $('.new_trim_values').hide();
    $(this).find('.new_trim_values').toggle();
});

$(document).click(function() {
    $('.new_trim_values').hide();
});