How to add jquery to open table

I have a problem setting jquery to open table on click, i am not a developer yet so please be patient.

here is what i have(HTML, CSS)

HTML

<ul class="pricing">
<li class="list-item"><a href="#">1</a></li> 
<li class="list-item"><a href="#">2</a></li>
<div>
<i class="fas fa-caret-down"></i>
</div>
<li class="list-item dnone"><a href="#">3</a></li>
<li class="list-item dnone"><a href="#">4</a></li>
</ul>

CSS

.dnone {
    display: none;
}

>Solution :

You can try this:

1. Add open class to the icon element and hide class to the li items.

HTML

<ul class="pricing">
    <li class="list-item"><a href="#">1</a></li>
    <li class="list-item"><a href="#">2</a></li>
    <div>
        <i class="fas fa-caret-down open"></i>
    </div>
    <li class="list-item hide dnone"><a href="#">3</a></li>
    <li class="list-item hide dnone"><a href="#">4</a></li>
</ul>

2. Remove/Add/toggle class on click.

JQUERY

$('.open').click(function() {

    $('.hide').toggle(' dnone');
    
});

3. Also you can add a bit of animation for the caret icon.

On click, add CSS class to rotate the caret.

JQUERY

$('.open').click(function() {

    if($(this).hasClass('rotate-180')) {
        $(this).removeClass('rotate-180');
    } else {
        $(this).addClass(' rotate-180');
    }
    $('.hide').toggle(' dnone');
    
});

Add this CSS declaration to your stylesheet.

CSS

.rotate-180 {
    transform: rotate(180deg);
}