Sending multiple data with jQuery AJAX

I am sending an ajax request to a php file:

php file

$html .= '
<div class="col-md-4 select_icon_fa"> 
    <i id="id'. $result->id .'" class="fas fa-cart-plus cart_icon select_cart_plus" onClick="add_to_cart('' . $result->id . '', 'add')"></i>
  <select class="select" id="qty' . $result->id . ' ">
    <option value="1">value</option>
    ';  
    for($i=1; $i<=20; $i++) {
        $html .= '              
        <option>' . $i . '</option>
        ';
    }
    $html .= '  
  </select>
</div>

JS

function add_to_cart(id,type) {
    alert(id);
    var qty = jQuery('#qty' + id).val();
    if (qty > 0 ) {
        alert(qty);
        jQuery.ajax({
            url:"<?php echo AJAX_FETCH_DATA ?>",
            type: 'post',
            data:'id='+id+'&qty='+qty+'&type='+type,
            success: function(result) {
                swal("success");
            }
        });
    } else {
        swal("Error", "error");
    }
}

console

id=17254&qty=undefined&type=add

html edit – output

<select class="select" id="qty17256 ">
                <option value="1">value</option> 

The problem is that second value qty is undefined (alert(qty);), if is undefined – cannot send to php file. I don’t know why this is happening.