Cant pull data for select query, except between dates - select

Question

I thought I have all the codes correct to pull a report by between dates and by group.id. But the filter message No Order Found. How to get the filter_class.php select where by group.id = index_class.php dropdown selected numeric value. I've been searching and trying everything I've learned no success.
Any help would be appreciated. If I put the group.id number in the filter_class.php select where by group.id = 4 manually, it will pull the report by that number. But it needs to pull the report based on the dropdown list on index_class.php.
I can pull the report just fine with the datepicker between dates, but I need it to pull by date and group.id number.
codes below
index_class.php
<div class="col-md-3">
<input type="text" name="from_date" id="from_date" class="form-control" placeholder="From Date" />
</div>
<div class="col-md-3">
<input type="text" name="to_date" id="to_date" class="form-control" placeholder="To Date" />
</div>
<div class="col-md-3">
<input type="button" name="filter" id="filter" value="Filter" class=".btn-mini btn-info" />
</div>
Drop down pulls data from database
------------------------------------
<div class="col-md-4">
<script>
$(document).ready(function() {
//////////////////////
$.getJSON("classes-data.php", function(return_data){
$.each(return_data.data, function(key,value){
$("#class").append("<option value=" + value.id +">"+value.name+"</option>");
});
});
//////////////////////
////////////
$('#class').change(function(){
//var st=$('#class option:selected').text();
var st=$('#class').val();
//alert(st);
});
/////////////////////
});
</script>
<select id=class id=class>
</select>
</div>
Datepicker code
----------------
<script>
$(document).ready(function(){
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd'
});
$(function(){
$("#from_date").datepicker();
$("#to_date").datepicker();
});
$('#filter').click(function(){
var from_date = $('#from_date').val();
var to_date = $('#to_date').val();
if(from_date != '' && to_date != '')
{
$.ajax({
url:"filter_class.php",
method:"POST",
data:{from_date:from_date, to_date:to_date},
success:function(data)
{
$('#order_table').html(data);
}
});
}
else
{
alert("Please Select Date");
}
});
});
</script>
filter_class.php
-------------------
$query = "
SELECT * FROM attendance_record, _person, _person_group
WHERE _person.id = attendance_record.personid AND _person_group.id = $('#class').val()
and date BETWEEN '".$_POST["from_date"]."' AND '".$_POST["to_date"]."'
ORDER BY _person_group.id ASC
";
$result = mysqli_query($conn, $query);