ajax post csrf problem 403 error

Hello everyone

I know this topic got discussed many time .. yet I could not make it run without problems

first of all .. I set csrf to true

PHP Code:

$config['csrf_protection'] = TRUE;  


now I included csrf token/value in the data sent by ajax
and it works for the first time ( as csrf is present and it is correct )
in the second time ajax tries to run .. I get 403 error ( as the sent csrf is still the same not changed ( not refreshed page ) )
i found that the first post will change the token value of csrf

how should I work with that and make it run ?

here is my code ( note that Iam using smary )

PHP

PHP Code:

        $this->vars['csrf'] = array(
        'name' => $this->security->get_csrf_token_name(),
        'hash' => $this->security->get_csrf_hash()
        ); 


HTML

Code:

<input type="text" class="form-control" name=atitle id=atitle>
<input id=csrf name="{$csrf.name}" type="hidden" value="{$csrf.hash}" />
<script>
$("#atitle").on('input propertychange paste change',function () {
    $.post("{$baseurl}Ajax/ar2eng",{ {$csrf.name}: $("#csrf").val(),title: $("#atitle").val() }).done(function( data ) {
     $("#aslug").val(data);
    });
  });
</script>