AfterRender on button in Lightning Component (DOM update)

I would not use afterRender to attach events, as you'll end up possibly adding duplicate events. Here's a simplified version that does not rely on a renderer:

<aura:application >
    <div id="myDIV" onclick="{!c.setActive}">
        <lightning:button class="btn" aura:id="bout" label="1"/>
        <lightning:button class="btn active" aura:id="bout" label="2"/>
        <lightning:button class="btn" aura:id="bout" label="3"/>
        <lightning:button class="btn" aura:id="bout" label="4"/>
    </div>
</aura:application>

---

({
    setActive: function(component, event, helper) {
        var bout = component.find("bout");
        bout.forEach(function(v) {
            $A.util.removeClass(v, "active");
        });
        $A.util.addClass(event.target, "active");
    }
})

---

Of course, in a real application, you'd probably put this method in a helper, but for demonstration purposes, the logic is instead in the controller.

Since you have an aura:id on your button(s), why not simply use the toggle utility method to remove/add the class you need to highlight the button being pressed "onclick"? Javascript in the context of the aura:framework and with locker service will require a change of habits when developing.

since you have an aura:id set to "bout" for all your buttons, when you use component.find('bout'), it will return an array of elements, you should be able to easily remove the class from the current element and add it to the pressed button.