无法使用PHP生成的Bootstrap选项卡中的AJAX检索数据

Question

So i have a select box which triggers an AJAX call to retrieve information from MYSQL which displays Bootstrap tabs. I'm trying to do another call to AJAX to display content in every tabs based of their value but can't seem to get a result back.

Here is part of the code that generates the tabs:

$result= $conn->query($sql);
if ($result->num_rows > 0) {
echo"
<div id=\"tabs\">
    <ul class=\"nav nav-tabs\">";
    while($row = $result->fetch_assoc()) {
    echo"
        <li class=\"nav-item\">
        <a class=\"nav-link\" id=\"gruppo\" value=\"".$row["id_gruppo"]."\" data-toggle=\"tab\" href=\"#".$row["id_gruppo"]."\">".$row["nome_gruppo"]."</a>
        <div id=\"show1\"></div>
        </li>";
      }
    echo"</ul></div>";
}

This is the AJAX code that i came with:

<script type="text/javascript">
  $(document).ready(function(){ 
    $("#gruppo").change(function(){ 
      var id_gruppo = $(this).val(); 
      var dataString = "id_gruppo="+id_gruppo; 

      $.ajax({ 
        type: "POST",
        url: "getData.php",
        data: dataString,
        success: function(result){
          $("#show1").html(result);
        }
      });

    });
  });
</script>

And just to test if anything happens this is the code of the page getData.php

 if(!empty($_POST["id_gruppo"]))
 {
  $id_gruppo=$_POST["id_gruppo"];
  echo"Gruppo:".$id_gruppo;
 }

Answer 1

Thanks to @Mabrouki Fakhri i found the solution.

function that gets called for every tab:

<script>
   function GetDataFromDB(id_gruppo){
        $.ajax({ /* THEN THE AJAX CALL */
            type: "POST", /* TYPE OF METHOD TO USE TO PASS THE DATA */
            url: "getData.php", /* PAGE WHERE WE WILL PASS THE DATA */
            data: "id_gruppo="+id_gruppo, /* THE DATA WE WILL BE PASSING */
            success: function(result1){ /* GET THE TO BE RETURNED DATA */
            $("#home").html(result1); /* THE RETURNED DATA WILL BE SHOWN IN THIS DIV */
        }
    });
}
</script>

code that generatates every tab:

  if ($result->num_rows > 0) {
        echo"
        <div id=\"tabs\">
            <ul class=\"nav nav-tabs\">";
        while($row = $result->fetch_assoc()) {
        echo"
                <li class=\"nav-item\">
                    <a class=\"nav-link\" id=\"gruppo\" onclick=\"GetDataFromDB(".$row["id_gruppo"].");\" value=\"".$row["id_gruppo"]."\" data-toggle=\"tab\" href=\"#".$row["id_gruppo"]."\">".$row["nome_gruppo"]."</a>
                </li>";
      }
            echo"
                </ul>
            </div>";
    }