从数据库获取Ajax数据

I am trying to build a system in which i use javascript to first check through a table in a database and if any of the rows in the boolean column "taken" are false it loads it will then load it into the html.

The user can then drag and drop the image and it will change the boolean value to false using AJAX.

So far I have the second half done. The pill is currently just an image in the html and it has drag and drop capabilities and if it is dropped on a certain div, it currently just changes the row with id 24 to false(just a random column for testing).

This all works but i need it to fetch rows that are false and create them and then using their id number set them to false if drag and dropped. I'm not sure how to do this. my code so far:

action.js

function doFirst(){
init();

function dropped(e){
    e.preventDefault();
    var r=confirm("Are you sure you want to take this pill?");
    if (r == true)
    {
        //pressed ok do database stuff
        mypic.style.visibility = 'hidden';
    leftbox.style.border = '3px solid white';
        var pillid=24;
        data = "pillid="+pillid
        $.post('js/filetoupdate.php', data, function(data) {
            //Here you can get the output from PHP file which is (data) here
        });
    }
    else
    {
        //return pill to clock
    }


}
window.addEventListener("load", doFirst, false);


function init() {
}
?>

the html

<div id="appframe">
  <div id="addbutton"><a href="medicineinput.php"><img src="images/addbutton.png" alt="add new medication image"/></a></div>
  <div id="message1"><h2>Todays medication</h2></div>
  <div id="message2"><h3>Drag and drop to take medication</h3></div>
  <div id="mouth"><img src="images/mouth.png" alt="mouth image"/></div>
  <div id="clock"><img src="images/clock/pill.png" alt="pill image" id="pillpic"/></div>
</div>