JSFiddle - React, Tailwind, and code Playground

HTML

<div id="conteudo"></div>
<form name="paginacao" id="paginacao" method="post" action="javascript:void(0)">
    <input name="pag" id="pag" type="hidden"/>
	<div>
		<p class="left pagina_1">1</p>
		<p class="left pagina_2">2</p>
		<p class="left pagina_3">3</p>
		<p class="left pagina_4">4</p>
		<p class="left pagina_5">5</p>
	</div>
</form>

CSS

.left{
    float:left;
}

p{
    display:block;
    width:20px;
    height:20px;
    border: 2px solid #000;
    border-radius: 5px;
    color:#FFF;
    background: #CCCCCC;
    margin: 5px;
    padding: 2px;
    text-align:center;
    cursor:pointer;
}

JavaScript

jQuery(document).ready(function(){

    jQuery('form#paginacao').on('click', 'p', function(){
        var pagina = parseInt(jQuery(this).text());
        jQuery('input#pag').val(pagina);
        jQuery('form#paginacao').submit();
    });

     jQuery('form#paginacao').on('submit', function(){
         var pagina = jQuery(this).find('input#pag').val();
         alert(pagina);
         // AQUI VOCE CRIA UM AJAX
         /*
         jQuery.ajax({
			url: {url},
			data: 'pagina='+pagina,
			success: function(msg){
            	jQuery('#conteudo').html(msg);
			}
		 });
         */
     });
    
});