Handle <select> values with ajax in module class, prestashop 1.6

I'm developing a ps module which let you classify the product attachment in categories an display them in the front product page.

I'm using a draggable list with the attachment, and when you drop them to the category it turns to an option tag, each category has a select tag where to drop the attachment.

I want to save the attachments and the category where they was dropped, so I thought make an ajax call to bring the data to my module class but I'm new with ajax and cant approach it.

this is what I've made:

the js code (inside the proper .tpl):

<script>
        $( ".droptrue" ).droppable({
                
                drop: function( event, ui ) {
                    //add <option> tag when an attachment is dropped to category's select
                    $(event.target).append('<option value="' + ui.draggable.attr('id') + '" selected>'+ui.draggable.text()+'</option>');
                    //remove the <li> which contained the attachment data
                    ui.draggable.fadeOut("slow").remove();
                    
                    var val = $('#categoryAttachmentArr').val();
                  //var tab = val.split(',');
                  //for (var i=0; i < tab.length; i++)
                  //if (tab[i] == $(this).val())
                  //     return false;
                    //create an array with the next format: 'id_category(1)'-'id_attachment(1)','id_category(2)'-'id_attachment(2)'[....]
                    //the comma will be the main character that will be splitted
                    $('#categoryAttachmentArr').val(val + ui.doppable.attr('id') + '-' + ui.draggable.attr('id') +',');
                }
        });
        
        $('#submitAddProduct').click(function(e){
            $.ajax({
              type: 'POST',
              url: baseDir + 'modules/adjuntos/classes/CategoryAttachment.php',
              data: {
                        ajax: true,
                        action: \'CategoryArray\',
                        cat_array: $('#categoryAttachmentArray').val(),
                    }
              dataType: 'json',
              success: function(json) {
                console.log($('#categoryAttachmentArray').val());
              }
        });
        })
    
        $( ".ui-state-default" ).draggable({ 
                
                revert: "valid",
            
        });
</script>

And my class:

class CategoryAttachment extends Objectmodel
{
     //other functions
     public function ajaxProcessCategoryArray()
    {
        $CategoryAttachmentArr = Tools::getValue('cat_array')
    }
}

Finaly I got the solution, maybe one of you guys will have this problem in the future.

My code in the .tpl:

$( ".ui-state-default" ).draggable();

        $( ".droptrue" ).droppable({

                drop: function( event, ui ) {
                    //add <option> tag when an attachment is dropped to category's select
                    $(event.target).append('<option value="' + ui.draggable.attr('id') + '" selected>'+ui.draggable.text()+'</option>');
                    $('#selectAttachment1').append('<option value="' + ui.draggable.attr('id') + '" selected>'+ui.draggable.text()+'</option>')
                    //remove the <li> wich contained the attachment data
                    ui.draggable.fadeOut("slow").remove();

                    var val = $('#categoryAttachmentArr').val();
                    //make a serialize() type array
                    $('#categoryAttachmentArr').val(val + $(this).attr('id') + "=" + ui.draggable.attr('id') +"&");

                    var value = $('#arrayAttachments').val();
                    var tab = value.split(',');
                    for (var i=0; i < tab.length; i++)
                        if (tab[i] == ui.draggable.attr('id')){

                            return false;
                        }
                    $('#arrayAttachments').val(value+ui.draggable.attr('id')+',');

                }
        });


        $('#submitCategories').click(function(e){
            var array = $('#categoryAttachmentArr').val()
            $.ajax({
              url: '../modules/adjuntos/ajax-call.php',
              data: {
                  action: 'handlearray',
                  token:new Date().getTime(),
                  cat: array
              },
              method: 'POST',
              success:function(data){
               $('#result').html(data);
             }
        });
        });

the ajax call goes to my ajax-call.php file:

<?php
 //load ps config
 require_once(dirname(__FILE__).'../../../config/config.inc.php');
 require_once(dirname(__FILE__).'../../../init.php');
 require_once('adjuntos.php');
 //adjuntos.php is the name of my module main file
 if(Tools::getIsset('token') && Tools::getIsset('action'))
 {
     $mp = new Adjuntos;
     echo $mp->handleArray();
 }

The handleArray function in my module main file:(it make a call to my custom class)

public static function handleArray()
{

    $html = '';
    $array = Tools::getValue('cat');
    $arrayExplode = explode("&", $array);
    foreach($arrayExplode as $value)
    {
        $finalArr = explode("=", $value);
        if (!CategoryAttachment::postProcess($finalArr))
        {
            $html .= '<p style="color:red;>Fallo</p>"';
        }     
    }
    $html .= '<p style="color:green;>Correcto</p>"';
    return $html;
  }

The function in my custom class:

public static function postProcess($finalArr)
    {

        return Db::getInstance()->execute(
                'UPDATE ps_attachment SET id_category = '.$finalArr[0].' WHERE id_attachment = '.$finalArr[1]
               );


    }//end 

This way is working like a charm, and make the code more scalable