prefab child buttons won't work but parent does

Alright, I'm sure this is basic and I'm sorry. I always just google and find answers here or elsewhere but I've googled this for 2 days and can't find what is wrong and starting to feel frustrated.

I have a prefab object that becomes an item in a scrolling list populated from a database so the user can select an item from this list.

the hierarchy of the prefab is:

Text_list_1
|-Button_main
|-Button_fav
|-text
|-heart image on
|- heart image off
|-Background Image

If I place the button on the parent 'Text_list_1' the button works, I can target the text child object and rollover, color change on click work fine.
But I need 2 buttons, not one, so that the user can click the text to select an item, or click the heart icon and favorite items in the list. But when I copy and paste the working button code form the parent 'text_list_1' to the child 'Button_main' the button no longer works and all interaction stops.

I realize I could just create a completely separate prefab and just split this into to prefabs to get around this issue and thus have 2 working buttons but that seems silly and like a complete hack job for what is probably a small a silly mistake.

thanks

 

It will be helpful if you explain how did you programmed that button. Is it a hardcoded script? Or a listener action on Button Component?

 

Sorry. listener action on a button component. I update the onclick command via script after the prefabs load, but the script portion after isn't the issue, the buttons don't seem to recieve any of the clicks

here's a screenshot