Need to override
vendor/magento/module-configurable-product/view/frontend/templates/product/view/type/options/configurable.phtml
template file, add below code at bottom and replace custom attribute names:
NOTE: Below code is for 2 values in your field. Please take count of values and do respective changes.
<?php
$myattribute = $_product->getResource()->getAttribute('color_price')->getFrontend()->getValue($_product);
$myattribute_color_qty = $_product->getResource()->getAttribute('color_custom')->getFrontend()->getValue($_product);
?>
<select id="colorprice_final">
<option value="0">Please Select Quantity</option>
<?php for($i = 1; $i <= $myattribute_color_qty; $i++){ ?>
<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php } ?>
</select>
</br>
<script>
jQuery("#colorprice_final").change(function(){
var colorprice = jQuery(this).val();
var pri =jQuery('.color-price').text();
var add_arr = new Array();
add_arr = '<?php echo $myattribute; ?>';
add_arr = add_arr.split(',');
var total = [];
var tier_arr = new Array();
jQuery('.tiercustprice').each(function(){
var str = jQuery(this).text() ;
tier_arr.push(str.replace('$',''));
});
if(colorprice == '1')
{
for( var i = 0; i < add_arr.length; i++)
{
total.push(parseFloat(add_arr[i])+parseFloat(tier_arr[i]));
}
}else if (colorprice == '2') {
for( var i = 0; i < add_arr.length; i++)
{
total.push(parseFloat(tier_arr[i])+parseFloat(add_arr[i])*2);
}
}
console.log(total);
});
</script>
In console you can see Total now.