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();
	if($(event.target).is($(this).children()))
	{
		$(this).children('.new_trim_values').toggle();
		$(this).parents(".new_result").siblings(".new_result").find('.new_trim_values').hide();
	}
	
});

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