I need to use php variables in javascript/ server-side and client-side conflict

Question

I'm new to programming but I know that you need a server-side language to access a database. I'm using php to access my database and display information, but I need to move the information around on the page at the press of a button (.click) with javascript. So the conversion of data from php to javascript is what is giving me trouble.

Basically, I'm building a system where anyone that buys a ticket is entered in a database. My staff go to a page where the ticket buyers get displayed in a table (Expected Attendance) on the webpage as displayed in a picture I added to the jsfiddle (link in the javascript box), and then they check a box (checkbox) if the person actually comes. At the click of a button (Okay), I need all clicked checkboxes to move to the ( Attending) table on the webpage. Code and fiddle below.

PHP

<?php
//Connect to the database
$mysqli = NEW mysqli('localhost:3306','root','password','roster');
//Query the database
$resultSet = $mysqli->query("SELECT * FROM attendant_info");
//Count the returned rows
if($resultSet->num_rows !=0) {
//Turn the results into an associative array
    while($rows = $resultSet->fetch_assoc())
    {
    $ID = $rows['ID'];
    $first_name = $rows['first_name'];
    $last_name = $rows['last_name'];
    $age = $rows['age'];
    $city = $rows['city'];
    $state = $rows['state'];
    $ticket = $rows['ticket'];
    $vip = $rows['vip'];

$entry = "<div id=\"port\"><div id=\"entry\"><!--start of entry-->
<div id=\"ID\"><!--start of ID-->$ID</div><!--end of ID-->
<div id=\"info\"><!--start of info-->
<infowrapper>
<booking><first>First Name:</first><slot1>$first_name</slot1></booking>
<booking><last>Last Name:</last><slot1>$last_name</slot1></booking>
<booking2><age>Age:</age><slot1>$age</slot1></booking2>
<booking4><city>City:</city><slot1>$city</slot1></booking4>
<booking2><state>State:</state><slot1>$state</slot1></booking2>
<booking3><ticket>Ticket#:</ticket><slot1>$ticket</slot1></booking3>
<booking5><vip>VIP:</vip><slot1>$vip</slot1></booking5>
</infowrapper>
<form action=\"\">
Attending<input type=\"checkbox\" name=\"attending\" value=\"attending\">
</form>
</div><!--end of info-->
</div><!--end of entry-->
</div>";

    echo "$entry";
    }   
//Display the results
}else{
    echo "No results.";}
?>

Javascript(Jquery)

$(document).ready(function() {
    $(".bypass").click(function() {
        if ($("#checkbox").click){document.atbox += "entry";
        }
    });
});

Here is a fiddle so you can see the whole thing together. My html is located in the fiddle, StackOverflow was giving me a hard time posting it. http://jsfiddle.net/oy81hrtp/1/

Answer 1

To properly check your checkbox, follow this method

$(document).ready(function() {
    $(".bypass").click(function() {
        if($('#checkbox').prop('checked')) {
            //Do what you want
        }
    });
});

Answer 2

This may give you some idea.

Demo:
http://jsfiddle.net/sfohgrvL/1/

HTML:

<div style="border: 1px solid #000; padding:10px">
    <h1>Expected Attendance</h1>

    <div id="expected_attendance">
        <p><input type="checkbox" class="my_checkboxes" />Option1</p>
        <p><input type="checkbox" class="my_checkboxes" />Option2</p>
        <p><input type="checkbox" class="my_checkboxes" />Option3</p>
        <p><input type="checkbox" class="my_checkboxes" />Option4</p>
        <p><input type="submit" class="my_submit" /></p>
    </div>
</div>
<br></br>
<div style="border: 1px solid #000; padding:10px">
    <h1>Attendance</h1>

    <div id="attendance">
    </div>
</div>

JS:

$(function(){
    $(".my_submit").on('click', function(){
        ht = $("#attendance").html();
        $("input:checkbox[class=my_checkboxes]:checked").each(function()
        {
            var th = $(this);
            ht = ht + th.parent().html();
            th.parent().remove();
        });
        $("#attendance").html(ht);
    });
});