Assigned input with JS and recovers it in php file via post

Question

Save Galera, I have an image list coming from Mysql via php, when clicking on the image it shows a div that was hidden and passes the value to a Hidden input, to be able to bring another query in php via ajax. I’m not getting this value and recover in php file via post.

 <script type="text/javascript">

 function bebidaClick(id){
    if($(mostra).css('display')=='none'){
    $(mostra).show();
      $(document).on('click', '.elemento', function (){
        var item = (this.id);    
           $("#bebida").attr('value', item);
       });
    
  }else{
    $(mostra).hide();
  }

} 
</script>

And the AJAX

<script type="text/javascript">
  $(document).ready(function(){
    $.ajax({
      url: "listar_bebidas.php",
      type: "POST",
      data: $('#frm').serialize(),
      dataType: "text",
      success: function(data){
        $('#mostra').html(data);
      },
    })
  })
</script>