1. Create one style class and name it error, give its border colour as red and background colour as yellow. Apply this class to the text box when the focus is moved out of it and if entered data is more than 10.
2. Create two textboxes and one button with + on it. On click of the button you should display sum of the two entered numbers in textbox. Similarly add Subtract, Multiple and Division buttons.
3. Your buttons in above code will remain in disable state till both the inputs are filled. ( Use one function to enable or disable buttons. Trigger that function with on Blur events of the textboxes )

<input type='text'  id='t1'> 
<script>
$(document).ready(function() {

$('#t1').blur(function(){
var my_val=parseInt($('#t1').val());	

if(my_val >10 ){
$('#t1').addClass('error');
}
})

})
</script>

<div class='row'> <div class='col-md-2'><input type='text' class='form-control t_input' id='t2'> </div><div class='col-md-2'><input type='text' class='form-control t_input' id='t3'> </div><div class='col-sm-2'><span id=display2>0</span> </div></div>
<br>
<div class='row'> <div class='col-md-2'><button type='button' class='btn btn-success' id=my_b2>+</button> </div><div class='col-md-2'><button type='button' class='btn btn-danger' id=my_b3>-</button> </div>
<div class='col-md-2'><button type='button' class='btn btn-warning' id=my_b4>*</button> </div>
<div class='col-md-2'><button type='button' class='btn btn-info' id=my_b5>/</button> </div>
</div>

<script>
$(document).ready(function() {

$('#my_b2').click(function(){
var my_val2=parseInt($('#t2').val());	
var my_val3=parseInt($('#t3').val());	
$('#display2').text(my_val2 + my_val3)
})

$('#my_b3').click(function(){
var my_val2=parseInt($('#t2').val());	
var my_val3=parseInt($('#t3').val());	
$('#display2').text(my_val2 - my_val3)
})

$('#my_b4').click(function(){
var my_val2=parseInt($('#t2').val());	
var my_val3=parseInt($('#t3').val());	
$('#display2').text(my_val2 * my_val3)
})

$('#my_b5').click(function(){
var my_val2=parseInt($('#t2').val());	
var my_val3=parseInt($('#t3').val());	
$('#display2').text(my_val2 / my_val3)
})

})
</script>

<div class='row'> <div class='col-md-2'><input type='text' class='form-control t_input' id='t12'> </div><div class='col-md-2'><input type='text' class='form-control t_input' id='t13'> </div><div class='col-sm-2'><span id=display12>0</span> </div></div>
<br>
<div class='row'> <div class='col-md-2'><button type='button' class='btn btn-success' id=my_b12>+</button> </div><div class='col-md-2'><button type='button' class='btn btn-danger' id=my_b13>-</button> </div>
<div class='col-md-2'><button type='button' class='btn btn-warning' id=my_b14>*</button> </div>
<div class='col-md-2'><button type='button' class='btn btn-info' id=my_b15>/</button> </div>
</div>

<script>
$(document).ready(function() {
$("#my_b12,#my_b13,#my_b14,#my_b15").prop('disabled',true);

my_function=function my_function(){
var my_val2=$('#t12').val();	
var my_val3=$('#t13').val();
if(my_val2.length >0 && my_val3.length >0){
$("#my_b12,#my_b13,#my_b14,#my_b15").prop('disabled',false);	
}else{
$("#my_b12,#my_b13,#my_b14,#my_b15").prop('disabled',true);		
}	
}

$('#t12,#t13').blur(function(){
my_function()
})	

$('#my_b12').click(function(){
var my_val2=parseInt($('#t12').val());	
var my_val3=parseInt($('#t13').val());	
$('#display12').text(my_val2 + my_val3)
})

$('#my_b13').click(function(){
var my_val2=parseInt($('#t12').val());	
var my_val3=parseInt($('#t13').val());	
$('#display12').text(my_val2 - my_val3)
})

$('#my_b14').click(function(){
var my_val2=parseInt($('#t12').val());	
var my_val3=parseInt($('#t13').val());	
$('#display12').text(my_val2 * my_val3)
})

$('#my_b15').click(function(){
var my_val2=parseInt($('#t12').val());	
var my_val3=parseInt($('#t13').val());	
$('#display12').text(my_val2 / my_val3)
})

})
</script>