CSS:Hover and Jquery.on("click", ....., .....) not working on certain tags on page but work on others when tested

I am using django.

HTML

    <div id="plancreator" class="rowflex flexcentery">
        <img src= "{% facebook_picture plan.user.facebook_id%}" class="tabbed imgflex circular" id="creatorimage" />
        <h5 class="tabbed darkgrey">{{plan.user.first_name}} {{plan.user.last_name}}</h5>
        <div id = "response" class="right">
            {% if contact.accepted == -1 %}
                <i id="yes" class="fa fa-times-circle fa-3x righttabbed darkgrey"></i>
                <i id="no" class="fa fa-check-circle fa-3x righttabbed darkgrey"></i>
            {% elif contact.accepted == 1 %}
                <i id="maybe" class="fa fa-check-circle fa-3x righttabbed green"></i>
            {% else %}
                <i id="maybe" class="fa fa-times-circle fa-3x righttabbed red"></i>
            {% endif %}
        </div>
   </div>

CSS:

#plancreator {
height: 90px;
background: #FFFFFF;
position: relative;
width: 100%;
z-index: -1;
margin-bottom:10px;
}

.circular {
width: 65px;
height: 65px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
display:block;
}

.rowflex{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}

.flexcenterx{
justify-content: center;
}

.flexcentery{
align-items:center;
}
.rowflex > .right{
              margin-left: auto;
              }
.righttabbed{
margin-right:15px;
}
.imgflex{
flex:none;
}
.tabbed{
margin-left: 15px;
}
i:hover {
cursor: pointer;
}

i:hover is applied to elements further down the page but is ignored by the elements in this plancreator div. Further more I'd like those tags to act as buttons but this javascript wont recognize the click events for those tags.

javascript

$(function () {
    $(document).on('click', '#maybe', function () {
            respond_to_plan(-1);
        });

     $(document).on('click', '#yes', function () {
            respond_to_plan(1);
        });

     $(document).on('click', '#no', function () {
            respond_to_plan(0);
        });
});

however if I move the '#no' or '#yes' or '#maybe' id to another element on the page the clicks are registered. Does anyone have any idea why this is happening?