Flip plugin and javascript functions do not work after AJAX response

I'm using the Flip plugin to create a div for each MySQL table record and bring the results via AJAX, on the front div I show the name and on the back div I show some information. This is my code:

index.html

<div class="result"></div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<script>
  $.post("result.php",{

   }).done(function(resp){
    $(".result").html(resp);
   });

  $(".fff").flip({
     trigger: 'manual'
  });

  function flip_back(idx){
     $(".card_"+idx).flip(true);
  }

  function flip_front(idx){
     $(".card_"+idx).flip(false);
  } 
</script>

result.php

<?php 
  $connect = mysqli_connect("localhost", "root", "mypass", "mydatabase");

  $sql = "SELECT * FROM users";
  $res = mysqli_query($connect,$sql);

  $html='';

  if(mysqli_num_rows($res)>0){
     while($row=mysqli_fetch_array($res,MYSQLI_ASSOC)){
        $id= $row['id'];

        $html.='<div class="card_'.$id.' fff"> 
          <div class="front">'.$row['name'].'
           <button onclick="flip_back(\''.$id.'\');">MORE INFO</button>            
           </div> 
           <div class="back">'.$row['email'].'Back content
           <button onclick="flip_front(\''.$id.'\');">RETURN</button>
           </div></div>';
      }

    echo $html;
   }

?>

The problem is that the Flip plugin and the onclick javascript functions do not work, I tried the following methods:

$.post("result.php",{

 }).done(function(resp){
    $(".result").html(resp);
 });  

$(document).on("load",function(){
    $(".fff").flip({
        trigger: 'manual'
    }); 

    function flip_back(idx){
     $(".card_"+idx).flip(true);
   }

   function flip_front(idx){
    $(".card_"+idx).flip(false);
   } 
});

Or this:

$(document).on("load",function(){
  $.post("test2.php",{

   }).done(function(resp){
     $(".result").html(resp);
   });
});


$(".fff").flip({
    trigger: 'manual'
}); 

function flip_back(idx){
   $(".card_"+idx).flip(true);
}

function flip_front(idx){
   $(".card_"+idx).flip(false);
} 

Even reviewing other questions I have tried this:

 $(".fff").flip({
  trigger: 'manual',
  onBefore: function(){
        console.log('before starting the animation');

        $.post("result.php",{

        }).done(function(resp){
              $(".result").html(resp);
        });

  }
 }); 

 function flip_back(idx){
    $(".card_"+idx).flip(true);
 }

 function flip_front(idx){
   $(".card_"+idx).flip(false);
 } 

But it's not working, how can I solve it?

I will appreciate your response.