Update database on buttonclick with AJAX and PHP
<p>I have searched all over for this and cannot find a solution. I am still a beginner in both PHP and AJAX, so please bear with me.</p>

<p>I have a file fetch.php which generates content for my page index.html.
Fetch.php gets data from a MySQL database and adds it to my index page like this:</p>

<pre><code>while ($res = mysqli_fetch_array($rs)) {
$str .= '&lt;div class="task" id='.$res['tid'].'&gt;
      &lt;table&gt;
              &lt;tr&gt;
                      &lt;td&gt;
                      &lt;button class="btnDelete" data-id="'.$res['tid'].'"&gt;x&lt;/button&gt;
                      &lt;/td&gt;
                      &lt;td&gt;'.$res["name"].'&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
              &lt;td&gt;'. $res["task"].'&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;';
}

echo $str;
</code></pre>

<p>The "tid" being my table index. Now, when I click the button with the data-id of 1, I want to delete the row with the tid of 1.</p>

<pre><code>&lt;script type="text/javascript"&gt;
$('.btnDelete').click(function() {
var recordid = $('.btnDelete').data('id');
$.ajax({
  type: 'POST',
  url: 'remove.php',
  data: { 'id': recordid},
});
});
&lt;/script&gt;
</code></pre>

<p>This sends the (supposed to) data-id to the following PHP.</p>

<pre><code>  $con = mysqli_connect(HOST,USERNAME,PASSWORD,DB);

 if (!$con) {
die("Can not connect: " .mysql_error());
}

$id = $_POST['recordid'];
$sql = "UPDATE tasks SET visible = 'hide' WHERE tid = $id ";

$query = mysqli_query($con, $sql);

if(mysqli_affected_rows($con)) {
    echo "Record deleted successfully";
}

mysqli_close($con);
</code></pre>

<p>My PHP files work, but nothing happens when I click the button?
Below is my complete HTML:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;test&lt;/title&gt;
 &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
 &lt;script src='https://code.jquery.com/jquery-2.1.3.min.js'&gt;&lt;/script&gt;


&lt;script type="text/javascript"&gt;

$(function() {

    getStatus();

});

function getStatus() {

    $('div#data').load('fetch.php');
    setTimeout("getStatus()",300000);

}

&lt;/script&gt;


 &lt;/head&gt;

 &lt;body&gt;

    &lt;div id="data"&gt; 

    &lt;/div&gt;

    &lt;script type="text/javascript"&gt;
$('.btnDelete').click(function() {
    var recordid = $('.btnDelete').data('id');
   $.ajax({
      type: 'POST',
      url: 'remove.php',
      data: { 'id': recordid},
   });
});
&lt;/script&gt;

 &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>How can I get the AJAX to trigger on the buttonclick and send the data-id to remove.php?</p>

<p>This is not a duplicate, it is an AJAX question and not a MySQL question</p>