Extra Element – down arrow

Hi,
You (Yigit) were gracious enough to help me out a few weeks ago by figuring out how to create a “down arrow” on a Tab button (example of what you helped with here: down arrow on active Tab.

I now have a similar situation here although I’m not using Tabs (too difficult to create the Tab content the way I need it so am using buttons instead).

I can’t figure out how to take the code you gave me earlier and make it work for this. Is there anyway you can help out once more?
Here is the two snippets of code you gave me for the Compare Tabs:
(function.php)

function add_custom_target(){
?>
<script>
jQuery(window).load(function(){
jQuery('.compare-table .tab').append('<div class="av-extra-border-element border-extra-arrow-down"><div class="av-extra-border-outer"><div class="av-extra-border-inner"></div></div></div>');
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_target');

and child-theme style.css:

.compare-table .border-extra-arrow-down {
    top: 41px;
}
.compare-table .av-extra-border-inner {
    background-color: #4A7FA8;
}
.compare-table .active_tab .av-extra-border-element {
    display: block;
}
.compare-table .av-extra-border-element {
    display: none;
}

Thanks!