Custom ribbon button appearing as disabled

Question

I am trying to add two custom ribbon button in a group for document library. Below is the code in Elements.xml. But when I deploy this code the buttons appear as disabled (either I select the document or not). I am not able to get what exactly is wrong here.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction Description="CustomActionDescription" Id="CustomActionID1" Location="CommandUI.Ribbon">
        <CommandUIExtension>
            <CommandUIDefinitions>
                <CommandUIDefinition Location="Ribbon.Documents.Groups._children">
                    <Group Id="CustomActionGroupID1" Sequence="25" Description="test description" Title="My Group" Template="Ribbon.Templates.Flexible2">
                        <Controls Id="CustomActionControlsID1">
                            <Button Id="CustomActionButtonID1" Command="CustomActionButtonCommand1" Image32by32="_layouts/15/images/placeholder32x32.png" LabelText="Approve" TemplateAlias="o2" Sequence="10" ToolTipTitle="Approve" ToolTipDescription="Approves selected documents" />
                            <Button Id="CustomActionButtonID2" Command="CustomActionButtonCommand2" Image32by32="_layouts/15/images/placeholder32x32.png" LabelText="Reject" TemplateAlias="o2" Sequence="20" ToolTipTitle="Reject" ToolTipDescription="Rejects selected documents" />
                        </Controls>
                    </Group>
                </CommandUIDefinition>
                <CommandUIDefinition Location="Ribbon.Documents.Scaling._children">
                    <MaxSize Id="CustomRibbonActionsOneMaxSize" Sequence="15" GroupId="CustomActionGroupID1" Size="LargeLarge" />
                </CommandUIDefinition>
            </CommandUIDefinitions>
            <CommandUIHandlers>
                <CommandUIHandler Command="CustomActionButtonCommand1" CommandAction="javascript:alert('Approve');" />
                <CommandUIHandler Command="CustomActionButtonCommand2" CommandAction="javascript:alert('Reject');" />
            </CommandUIHandlers>
        </CommandUIExtension>
    </CustomAction>
</Elements>

Answer 1

This is probably the weirdest solution I have come across. If anyone can give the reason behind it I would be glad.

Inspired (and out of options) from this answer I create a new feature in my solution, added the item (that had by custom ribbon button) to that feature, removed item from old feature and deployed again. And it worked!

Downside is that whenever I want to update my ribbon button code, I have create a new feature and add item to it.