javascript - Collecting Row IDs in an Array using Jquery and then Querying those values for a new table -

i'm trying set function using jquery/php user selects checkbox in row specific id (the id matches primary key of row data in database), stores each row id array, , upon clicking "compare selected rows" button passes new page table of results displayed selected rows.

each input looks this

<input type='checkbox' id='$id' class='comparerow'></input>

i pretty novice @ jquery , planning use variation of previous script had put display dynamic row data in modal. not sure if code relevant @ passes row id php page in order query database. mind has been used single queries in past new function need sort of foreach statement @ query level in order process array of ids, im sure.

heres script i've been trying tweak

$(function(){     $('.comparerow').click(function(){       var ele_id = $(this).attr('id');         $.ajax({           type : 'post',            url : 'query.php', //query            data :  'post_id='+ ele_id, // passing id via ajax         success : function(r)            {           other code?                       });            }          });     });     }); 

i know there more needed here have far, appreciated.

update, i've created page , have following:

in compareselected.php have following code:

if(isset($_post['post_id'])){     $compare_received = $_post['post_id']; } print_r($compare_receive); 

it returns undefined index.

i modified code change page after so:

$('.comparerowbutton').click(function(){           var ids = [];           //loop checked checkboxes           $('.comparerow:checked').each(function(){           //store id ids           ids.push($(this).attr('id'));       });        $.ajax({           type : 'post',            url : 'compareselected.php', //query            data :  {post_id:ids}, // passing id via ajax         success : function(r)            {           window.location = 'compareselected.php';             }          });     }); 

not sure why won't pick array values.

if you're set on current implementation, maintain reference data returned each ajax call in rows array. later, implement button fires function append row data table. of course, may need parse data returned request prior appending.

$(function(){   var rows = [];   $('.comparerow').click(function(){     var ele_id = $(this).attr('id');     $.ajax({       type : 'post',       url : 'query.php', //query        data :  'post_id='+ ele_id, // passing id via ajax        success : function(data){         rows.push(data);       }     });   });   $('.displaytable').click(function(){     // append table or divs   }); }); 

i suggest avoid page reload here. or, if must, make ajax request on following page. want avoid tightly coupling logic between different jquery modules. ajax should utilized load data asynchronously, without requiring page reload.