Jquery script not hiding columns in primefaces datatable

Question

I have a primefaces datatable with 3 columns: vote3 , vote2 and vote1, each column contains a button,on page load only vote 3 column is visible, what I want is that when I click on the button in the column vote3, the column disappears and the column vote2 appears, then the same thing with columns vote2 and vote1, I wrote a jquery script for this, the result is: on page load only vote 3 column is visible, but when I click on the button vote3, the column doesn't disappear and the column vote2 doesn't appear. my datatable

<h:form id="form">
        <p:dataTable value="#{projectsMB.projects}" var="p" border="1">
            <p:column>
                <f:facet name="header">
                    <h:outputText value="id" />
                </f:facet>
                <h:outputText value="#{p.id}" />
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="NAME" />
                </f:facet>
                <h:outputText value="#{p.name}" />
            </p:column>

            <p:column>
                <f:facet name="header">
                    <h:outputText value="GOAL" />
                </f:facet>
                <h:outputText value="#{p.objective}" />
            </p:column>

            <p:column>
                <f:facet name="header">
                    <h:outputText value="DESCRIPTION" />
                </f:facet>
                <h:outputText value="#{p.description}" />
            </p:column>

            <p:column>
                <f:facet name="header">
                    <h:outputText value="ACTION" />
                </f:facet>
                <h:commandButton actionListener="#{projectsMB.delete(p)}" value="del" />

            </p:column>
    <p:column id="vote3">
                <f:facet name="header">
                    <h:outputText value="Vote" />
                </f:facet>
                                <p:commandButton actionListener="#{projectsMB.vote3()}" value="3 points"  icon="ui-icon-search" styleClass="voteButton" >
                        <f:setPropertyActionListener value="#{p}" target="#{projectsMB.project}" />
               </p:commandButton> 
            </p:column>     

                <p:column id="vote2" style="display:none">
                <f:facet name="header">
                    <h:outputText value="Vote" />
                </f:facet>
                                <p:commandButton actionListener="#{projectsMB.vote2()}" value="2 points"  icon="ui-icon-search" styleClass="voteButton" >
                                        <f:setPropertyActionListener value="#{p}" target="#{projectsMB.project}" />
                </p:commandButton>
            </p:column>     

                        <p:column id="vote1" style="display:none">
                <f:facet name="header">
                    <h:outputText value="Vote" />
                </f:facet>
                                <p:commandButton actionListener="#{projectsMB.vote1()}" value="1 point"  icon="ui-icon-search" styleClass="voteButton" >
                                        <f:setPropertyActionListener value="#{p}" target="#{projectsMB.project}" />
                </p:commandButton>
            </p:column> 
        </p:dataTable>
        <h:commandButton actionListener="#{projectsMB.doNew()}" value="new" />
    </h:form>

my script

<h:head>
            <script>

            $(function() {
var  c=0;
                $(".voteButton").click(function () {
if(c==0)
                    {$("#vote3").hide( );
                    $("#vote2").show();
                    c++;
                    }
if(c==1)
{$("#vote2").hide( );
$("#vote1").show();
c++;
}               });});

            </script>
        </h:head>