How to click on delete and add button and not trigger the accordion in React

I have an accordion, when you click on it the content drops, all works well, but the problem is, i have a delete and an add button, i want to click them and not trigger the accordion. How can i accomplish that? I use UncontrolledCollapse from reactstrap and it has a toggler which is an id of an element.

<li id={`toggle-catalog-item-${}`}
Some Accordion
<div className="icons">

Here is an image

All of this grayish background is my <li></li> that has an id toggler that will toggle the UncontrolledCollapse that will show all the nested items.

I can achieve it by making only the <a></a>to have a toggle id, the problem is, i want to click on spaces between the icons and have the content drop.
So what i want is to only have icons act as a non-toggler
I tried doing it by applying z-index:100 to icons div but it doesnt work.

In your click handler you should check if clicked element is the icon and act accordingly.
Here’s basic example:

Thanks for taking your time to answer this, i already tried this approach days ago, unfortunately it doesn’t help with UncontrolledCollapse (reactstrap), there is no state, it just takes an id for a toggler props, that’s how it shows content, you can see how it looks in my example.

Yeah, that complicates it a bit.
Rewrote my example to use CSS positioning.

Thanks, it wasn’t exactly the answer, but it led me into a right direction, separating toggler with icons did the trick. I had a similar idea, but i didn’t think of doing position:absolute.

Anyway, thanks man! great help, woudln’t have been able to do it without ya!
Btw also thanks for looking into UnctrolledCollapse just for me