Jquery Radio button value not changing - php

Question

Need some help, ive searched google and have no luck.
I am trying to update my radios-button's value in the div class "size-number". That value I want use it within the ajax request below. When i inspect element, the radio-button has the updated value of the button available but when i console.log it in jquery, it gives me the same initial value, despite which i pick. Ive tried setting the radio-buttons to checked="checked". Also i believe its a matter of the default value. Ive also tried input validation within jquery. In addition, ive attempted to reference the input ("input[name='radiobten']:checked") in jquery as well. any suggestions would very appreciated!
$(".size-number").click(function(){
var modelid = $("#modelval").attr('value');
console.log(modelid);
$.ajax({
url: '"Example API"',
data: [],
dataType: 'json',
type: "GET",
success: function(res){
var newarr = (res).filter(function(indx){
return indx.model_cat_id == modelid
});
console.log(newarr)
$('modelselect').slideToggle(200).html(res);
}});
});
<?php foreach ($brands as $brand){ ?>
<div class="search-select">
<i class="fas fa-chevron-down"></i>
<a href="/<?php echo $brand->full_slug.$urlSize; ?>">
<?php echo $brand->name; ?></a>
</div>
<?php
$slugCurrent = $brand->slug;
foreach ($models as $model){
if($model->brand_id == $brand->id){
if(is_null($model->model_cat_id)){?>
<div class="size-number" style="display: none;">
<?php echo $model->name; ?><input type="radio" id="modelval" name="radiobten" value="<?php echo $model->id?>"/>
</div>
<?php
}
}
}
}?>

Answer 1

You cannot have multiple element with same id i.e : modelval. This will always give you value of first radio button no matter which button you choose.Instead use class to get value of radio button.So ,onclick of div you can use $(this).find("yourclassname").attr('value') to get value of that particular button only.
Demo Code :
$(".size-number").click(function() {
//div->find closest modelval->value
var modelid = $(this).find(".modelval").attr('value');
console.log(modelid);
$.ajax({
url: '"Example API"',
data: [],
dataType: 'json',
type: "GET",
success: function(res) {
var newarr = (res).filter(function(indx) {
return indx.model_cat_id == modelid
});
console.log(newarr)
$('modelselect').slideToggle(200).html(res);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="size-number" >
Abc<input type="radio" class="modelval" name="radiobten" value="1"/>
</div>
<div class="size-number" >
Xyz<input type="radio" class="modelval" name="radiobten" value="2"/>
</div>