hi. i got 2 tables next to each other: .contact-names & .guest-list and a left and a right button between those tables and a drop down list. by default both tables have the message "Please select an event" from the drop down. when an event is selected .contact-names will be filled with names from database which was hidden by default while .guest-list is empty. when a 3 rows(names) from .contact-names is selected background for those rows change to red. and then when right button is clicked those three names get appended to .guest-list(class for guest-names tbody). the problem arises when 1 or 2 rows(names) not all 3 from .guest-list is clicked and left button is clicked instead of the 1 or 2 rows(names) prepended to .contact-list(class for contact-names tbody) all the rows(names) get prepended into .contact-list. help please. TIA!
<?php
require "connection.php";
$user_id = $_SESSION['sess_user_id'];
$eventnames = $dbh->prepare("SELECT event_id,event_name FROM event WHERE euser_id = :user_id ORDER BY start_event ASC");
$eventnames->bindParam(':user_id', $user_id);
$eventnames->execute();
$retrieve = $eventnames->fetchAll();
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".container-buttons").hide();
$("#dd-event").change(function(){
if($(this).val() == "0")
{
$(".contact-list tr").hide();
var msg = "<span>Please select an event.</span>";
$(".contact-list").append(msg);
$(".guest-names").append(msg);
}
else
{
$(".contact-list tr").show();
$(".container-buttons").show();
$(".guest-names").empty(msg);
$(".contact-list tr").on("click", function(){
var row = $(this).css('background','red');
$("#moveright").on("click", function(){
row.appendTo(".guest-names");
row.css('background','');
});
$("#moveleft").on("click", function(){
row.prependTo(".contact-list");
row.css('background','');
});
});
}
});
$("#dd-event").trigger('change');
});
</script>
</head>
<body>
<div>
<div>
<h2 id="title">Event Management System</h2>
</div>
</div>
<br><br>
<div class="dropdown">
<label>Event : <label/>
<select name="event" id="dd-event" required>
<option value="0" selected>Event</option>
<?php foreach($retrieve as $r): ?>
<option value="<?=$r['event_id']?>"><?=$r['event_name']?></option>
<?php endforeach ?>
</select>
</div>
<br>
<div class="main">
<div class="add-guest-contain">
<tbody>
<table class="contact-names">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody class="contact-list">
<?php
require "connection.php";
$check = $dbh->prepare("SELECT contact_id,salutation,fname,lname FROM contact1 ORDER BY fname ASC");
$check->execute();
if($check->rowCount() > 0)
{
$check->setFetchMode(PDO::FETCH_ASSOC);
while($rows = $check->fetch())
{
$salute = $rows['salutation'];
$fname = $rows['fname'];
$lname = $rows['lname'];
echo
"<tr>
<td class='name-row'><input type='hidden' value='$salute $fname $lname' name='guest-name[]'><span style='font-size:14px;'>$salute $fname $lname</span></td>
</tr>";
}
}
else
{
echo
"<tr>
<td>Contact Database is empty.</td>
</tr>";
}
?>
</tbody>
</table>
</tbody>
</div>
<div class="guest-list-contain">
<tbody>
<table class="guest-list">
<thead>
<tr>
<th>Guest Name</th>
</tr>
</thead>
<tbody class="guest-names">
</tbody>
</table>
</tbody>
</div>
<div class="container-buttons">
<div class="contain-buttons">
<input type="button" value=">" id="moveright" class="move">
<br><br>
<input type="button" value="<" id="moveleft" class="move">
</div>
</div>
</div>
</body>
</html