Delete individual lines/rows with PHP button - php

Question

What I am trying to do is have a PHP page display the contents of a MySQL database and and each line it displays, it give me a delete button so I can delete individual rows. I have the code kind of working. The code delete the lines of code, but not the one I select, instead it deletes the last line and not the one I tell it to delete.
Here is a screenshot, I know it does not look pretty, I was going to clean it up after I get the code working.
HTML:
<?php
// Delete php code
if(isset($_POST['delete_series']))
{
// here comes your delete query: use $_POST['deleteItem'] as your id
$delete = $_POST['delete_series'];
$delete_sql = "DELETE FROM `Dropdown_Series` where `id` = '$delete'";
if(mysql_query($delete_sql, $conn))
{
echo "Row Deleted </br>";
echo "$delete";
};
}
//Insert Code
if(isset($_POST['add_series']))
{
$insert_sql = "INSERT INTO dropdown_series (series) VALUES ('$_POST[add_series]' )";
if(!mysql_query($insert_sql, $conn))
{
die ('Error: ' . mysql_error());
}
echo "Series Added <br><br>";
}
?>
<br />
<h1>Add New Series Title</h1>
<h3>Add New: </h3><br />
<form name = action="add_series.php" method="POST">
<input type = "text" name = "add_series" required/><br /><br />
<input type ="submit" name="submit" value="Add">
</form>
<h3>Current Series: </h3><br />
<?php
//Delete button on each result of the rows
$query = mysql_query("SELECT id, series FROM Dropdown_Series"); // Run your query
// Loop through the query results, outputing the options one by one
echo "<form action='' method='POST'>";
while ($row = mysql_fetch_array($query))
{
echo $row['series'] . " ";
echo $row['id'];
echo "<input type='hidden' name='delete_series' value=' " . $row['id'] . "' />";
echo "<input type='submit' name='submit' value='Delete'>";
//echo $row['series'] . " ". $row['id'] . "<input type='submit' value='delete'>";
echo "<br />";
}
echo "</form>";
?>

Answer 1

Your loop will result in multiple delete_series inputs - within the same form.
You could create separat forms for each option:
while ($row = mysql_fetch_array($query))
{
echo "<form action='' method='POST'>";
// ...
echo "<input type='hidden' name='delete_series' value=' " . $row['id'] . "' />";
echo "<input type='submit' name='submit' value='Delete'>";
// ...
echo "</form>";
}

Answer 2

I believe that a very quick answer would be
while ($row = mysql_fetch_array($query))
{
echo "<form action='' method='POST'>";
echo $row['series'] . " ";
echo $row['id'];
echo "<input type='hidden' name='delete_series' value=' " . $row['id'] . "' />";
echo "<input type='submit' name='submit' value='Delete'>";
//echo $row['series'] . " ". $row['id'] . "<input type='submit' value='delete'>";
echo "<br />";
echo "</form>";
}
If I were you I would prefer injecting some javascript in the logic, and perform the Delete request using an ajax call.
you can refer to this tutorial to get more understanding of what I am refering to https://scotch.io/tutorials/submitting-ajax-forms-with-jquery