How to insert data MySQL using PHP + Ajax : <p>There are a lot of similar questions out there, but my issue is a little bit more complicated.</p>

<p>I have a table called <code>movies</code> from which I am displaying data in a loop using the code below:</p>

<pre><code>&lt;?php 
// LISTS MOVIES ORDERED BY RELEASE DATE -- LATEST MOVIES BY YEAR.
$stmt = $connect-&gt;prepare("SELECT id, title, releaseDate, posterUrl FROM movies ORDER BY releaseDate DESC LIMIT 4");
$stmt-&gt;execute();
$stmt-&gt;store_result();
$stmt-&gt;bind_result($movieId, $movieTitle, $movieDate, $moviePoster);
while ($stmt-&gt;fetch()) { ?&gt;
    &lt;div class="index-movie"&gt;
        &lt;div class="meta-container"&gt;
            &lt;img src="&lt;?php echo $moviePoster; ?&gt;" alt="&lt;?php echo $movieTitle; ?&gt;" class="poster"&gt;
            &lt;div class="meta"&gt;
                &lt;span class="title"&gt;&lt;?php echo $movieTitle . ' (' . substr($movieDate, 0, 4) . ')'; ?&gt;&lt;/span&gt;                       
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;form method="POST" class="watchlist-form"&gt;
            &lt;input type="text" name="watchlist-movie-id" style="display: none;" class="watchlist-movie-id" value="&lt;?php echo $movieId; ?&gt;"&gt;
            &lt;input type="submit" class="add-to-watchlist" value="Add to Watchlist" name="add-to-watchlist"&gt;
        &lt;/form&gt;
    &lt;/div&gt;
&lt;?php 
}
$stmt-&gt;free_result();
$stmt-&gt;close();
?&gt;
</code></pre>

<p>This loop displays four entries from the <code>movies</code> table. When the user clicks the <code>.add-to-watchlist</code> button, the movie is to be added to the user's list. I have a two separate tables <code>users</code> for users and <code>watchlist</code> for the junction table between <code>users</code> and <code>movies</code>.</p>

<p>My question is, how do I implement a function so that I can add the "specific" movie from the list of four to the user's list? For fetching the <code>movieId</code> I echoed that into a hidden input field, but still can't get that to work.</p>

<p>My jQuery code is:</p>

<pre><code>$('.add-to-watchlist').on('click', function(e) {
    e.preventDefault();
    var data = $(this).parent().find('.watchlist-movie-id').val();
    $.ajax({
        type: 'POST',
        url: 'includes/watchlist.php',
        dataType: 'text',
        data: data,
        success: function() {
            $(this).hide();
        },
        error: function(error) {
            alert(error);
        }
    });
});
</code></pre>

<p>And <code>watchlist.php</code> is:</p>

<pre><code>&lt;?php 
require('includes/config.php');
require('includes/auth.php');
$defaultId = 'DEFAULT';
$currentDate = 'now()';
$movieId = $_POST['watchlist-movie-id'];
$stmt = $connect-&gt;prepare("INSERT INTO watchlist (id, date, userId, movieId) VALUES (?, ?, ?, ?)");
$stmt-&gt;bind_param("ssii", $defaultId, $currentDate, $currentUser, $movieId);
$stmt-&gt;execute();
$stmt-&gt;close();
?&gt;
</code></pre>
