Deleting and Adding items to database based on multiselect list - php

Question

I am currently trying to make a multi select list where items can be added and removed based on two columns. The left column is the full list and the right column where all the selected items are displayed. On submit the right column adds all newly selected items into the USERVIDEOS database.
The issue however is removing items from the USERVIDEOS database if they are removed from the right column. When pressing submit the USERVIDEOS database should only have rows for items currently in the right column and remove those no longer in there.
Example image
I have several items however I am unable to solve the issue. I've tried the following code:
if($_SERVER["REQUEST_METHOD"] == "POST") {
if (isset($_POST['user-videos'])) {
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $conn->prepare("DELETE FROM USERVIDEOS WHERE userID = :userID AND videoID NOT IN (:videos)");
$stmt->bindParam(':userID', $userID);
$stmt->bindValue(':videos', implode(",", $_POST['user-videos']));
$stmt->execute();
// Add the new Videos
$stmt = $conn->prepare("INSERT INTO USERVIDEOS (userID, videoID) VALUES (:userID, :videoID)");
$stmt->bindParam(':userID', $userID);
$selected = $_POST['user-videos'];
foreach ($selected as $videoID) {
$stmt->bindParam(':videoID', $videoID);
$stmt->execute();
}
} catch (PDOException $e) {
echo 'Error: ' . $e->getMessage();
}
however, this results in removing everything but the newly selected items. The goal is to only remove those that got removed from the right column and add those that got added to the right column.
HTML
<div class="form_container">
<form name="videos" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div class="lvids">
<label for="video-list">Database Videos:</label>
<select class="videolist" id="video-list" size="10" name="video-list[]" multiple>
<?php
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// Retrieve all video IDs from the USERVIDEOS table
$stmt1 = $conn->prepare("SELECT videoID FROM USERVIDEOS WHERE userID = :userID");
$stmt1->bindParam(':userID', $userID);
$stmt1->execute();
$filterVideos = $stmt1->fetchAll(PDO::FETCH_COLUMN, 0);
if(sizeof($filterVideos) != 0) {
$stmt2 = $conn->prepare("SELECT ID, videotitle FROM VIDEOS WHERE ID NOT IN (".implode(',', $filterVideos).") ORDER BY categorie ASC");
$stmt2->execute();
while ($row = $stmt2->fetch(PDO::FETCH_ASSOC)) {
echo "<option value='" . $row['ID'] . "'>" . $row['videotitle'] . "</option>";
}
} else {
$stmt = $conn->prepare("SELECT ID, videotitle FROM VIDEOS ORDER BY categorie ASC");
$stmt->execute();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo "<option value='" . $row['ID'] . "'>" . $row['videotitle'] . "</option>";
}
}
} catch (PDOException $e) {
echo 'Error: ' . $e->getMessage();
}
$conn = null;
$stmt = null;
?>
</select>
</div>
<div class="button_container">
<input class="btn" type="button" value=">>" id="add-btn">
<input class="btn" type="button" value="<<" id="remove-btn">
</div>
<div class="uvids">
<label for="user-videos">Selected Videos:</label>
<select class="uservideos" id="user-videos" size="10" name="user-videos[]" multiple>
<?php
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $conn->prepare("SELECT VIDEOS.ID, VIDEOS.videotitle FROM VIDEOS
JOIN USERVIDEOS ON USERVIDEOS.videoID = VIDEOS.ID
WHERE USERVIDEOS.userID = :userID");
$stmt->bindParam(':userID', $userID);
$stmt->execute();
$result = $stmt->fetchAll();
foreach($result as $row) {
echo "<option value='" . $row['ID'] . "'>" . $row['videotitle'] . "</option>";
}
} catch (PDOException $e) {
echo 'Error: ' . $e->getMessage();
}
?>
</select>
</div>
<br><br>
<input type="submit" value="Upload Videos">
</form>
</div>
If more information is required, just ask.

Answer 1

I've found a solution (non ideal) to the problem.
I've utilized javascript to select all options within the right column on the button submit. After this PHP removed all entries within the database where userID = $userID and after this adds all selected options back in.
The problem has been solved with a workaround. However, ideally, the database should remove everything and add items back that were there before.
Javascript utilized to select all options within the select:
$('#submit-button').click(function(event) {
event.preventDefault(); // prevent the form from being submitted
$('#user-videos option').prop('selected', true);
$('#videos').submit();
});