Auto fill multiple text fields using Ajax and jQuery - php

Question

I have a form, which I have divided in to there parts using tabs, in my second tab I'm using a select option and then try to auto fill 2 text box's and one text area using Ajax ,but although console log shows that ajax return the object but it doesn't fill the required fields.
tab
<div class="tab-pane fade " id="package_details">
select option
<select name="package" id="packageid" >
<option selected > Select a Package </option>
#foreach($package as $c)
<option value="{{$c->id}}">{{$c->tour_name}}</option>
#endforeach
</select>
Text fields i need auto filling
<input type="number" name="no_of_days" id="no_of_days" class="form-control"
placeholder="Days" >
<input type="number" name="cost" id="cost" class="form-control"
placeholder="Price" >
<textarea rows="4" cols="50" class="form-control" id="description" name="description" placeholder=" Package Details" ></textarea>
my Ajax code
$(document).on('change', '#packageid', function(e) {
e.preventDefault();
var pkid = $(this).val();
$.ajax({
type:'POST',
url: "{{ route('package.tour') }}",
dataType: "json",
data:{
'_token':$('input[name=_token]').val(),
'selectedid': pkid
},
success: function(data){
// console.log(data);
$('#description').val(data.description);
$('#no_of_days').val(data.no_of_days);
$('#cost').val(data.cost);
}
});
});
Function in my controller
public function getPackage(Request $request)
{
$data = packages::where('id', $request->selectedid)->get();
return response()->json($data);
}
what is wrong with my Ajax / JQuery code ?

Answer 1

check using like this in ajax response :
$("textarea#description").val(data.description);
$("input#no_of_days").val(data.no_of_days);
$("input#cost").val(data.cost);

Answer 2

I finally figured out ,since response is an array i had to use $("#description").val(data[0].description); and it works !