Скрипт jQuery не скрывает столбцы в таблице данных Primefaces

У меня есть данные Primefaces с 3 столбцами: голосование3, голосование2 и голосование1, каждый столбец содержит кнопку, при загрузке страницы виден только столбец голосования 3, я хочу, чтобы при нажатии кнопки в столбце голосование3 столбец исчезал и появляется столбец vote2, затем то же самое со столбцами vote2 и vote1, я написал для этого сценарий jquery, результат: при загрузке страницы виден только столбец Голосование 3, но когда я нажимаю кнопку vote3, столбец не не исчезнет, ​​и столбец vote2 не появится. моя таблица данных

<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>

мой сценарий

<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>