jquery select dropdown change the value of the other dropdown - php

Question

Hi i have this dropdown select option when selecting change the other value of the select dropdown. Im using onchange in jquery. My problem is when i select apple dropdown the lists of apple products will appear which is okay. Now when i select samsung it wont change the value for samsung products. Here is my code below
<script type="text/javascript">
jQuery(document).ready(function($) {
/*$("#phoneBrand").change(function () {
var end = this.value;
var firstDropVal = $('#data-original-index').val();
alert(firstDropVal);
});*/
$("#phoneBrand").on('change', function(){
var phoneBrand = $("#phoneBrand").val();
if(phoneBrand == "apple"){
alert(phoneBrand);
<?php
// All Option
//echo '<option value="">'.$houzez_local['all_model'].'</option>';
$prop_type = get_terms (
array(
"property_feature"
),
array(
'orderby' => 'name',
'order' => 'ASC',
'hide_empty' => true,
'parent' => 0
)
);
//houzez_hirarchical_options('property_feature', $prop_type, $type );
?>
//var pModel = "<?php echo $pModel;?>";
//alert(pModel);
$("div").each(function(i) {
var dropdown = $("<select>");
<?php foreach($prop_type as $model): ?>
<?php
$pName = $model->name;
$pSlug = $model->slug;
$pModel = $model->description;
?>
<?php if($pModel == "apple"): ?>
dropdown.append($('<option>', {
value:'<?php echo $pSlug; ?>',
text:'<?php echo $pName;?>'
}));
<?php endif; ?>
<?php endforeach; ?>
$("#phoneModel").replaceWith(dropdown);
});
}else if(phoneBrand == "blackberry"){
//$("#age_boys").show();
alert('test');
}else if(phoneBrand == "htc"){
}else if(phoneBrand == "huawai"){
}else if(phoneBrand == "lg"){
}else if(phoneBrand == "microsoft"){
}else if(phoneBrand == "nokia"){
}else if(phoneBrand == "samsung"){
alert(phoneBrand);
<?php
// All Option
//echo '<option value="">'.$houzez_local['all_model'].'</option>';
$prop_type = get_terms (
array(
"property_feature"
),
array(
'orderby' => 'name',
'order' => 'ASC',
'hide_empty' => true,
'parent' => 0
)
);
//houzez_hirarchical_options('property_feature', $prop_type, $type );
?>
//var pModel = "<?php echo $pModel;?>";
//alert(pModel);
$( "div" ).each(function(i) {
var dropdown = $("<select id='samsung'>");
<?php foreach($prop_type as $model): ?>
<?php
$pName = $model->name;
$pSlug = $model->slug;
$pModel = $model->description;
?>
<?php if($pModel == "samsung"): ?>
dropdown.append($('<option>', {
value:'<?php echo $pSlug; ?>',
text:'<?php echo $pName;?>'
}));
<?php endif; ?>
<?php endforeach; ?>
$("#phoneModel").replaceWith(dropdown);
});
}
});
});
</script>
Now my html select dropdown which is built from theme houzez in wordpress
<?php if( $adv_show_hide['type'] != 1 ) { ?>
<div class="col-sm-3 col-xs-12">
<div class="form-group" >
<select id="phoneModel" name="feature" class="selectpicker " data-live-search="false" data-live-search-style="begins">
<?php
// All Option
echo '<option value="">'.$houzez_local['all_model'].'</option>';
$prop_type = get_terms (
array(
"property_feature"
),
array(
'orderby' => 'name',
'order' => 'ASC',
'hide_empty' => true,
'parent' => 0
)
);
houzez_hirarchical_options('property_feature', $prop_type, $type);
?>
</select>
</div>
</div>
<?php } ?>
Can someone help me figured this thing out? that it will only change the value once the dropdown is only selected.
Provided below is a screenshot image
Any help is muchly appreciated. TIA. Im using wordpress