JSFiddle - React, Tailwind, and code Playground

HTML

(x1,y1)=(<input id="x1" autocomplete="off">,<input id="y1" autocomplete="off">)<br>
(x2,y2)=(<input id="x2" autocomplete="off">,<input id="y2" autocomplete="off">)<br>
(x3,y3)=(<input id="x3" autocomplete="off">,<input id="y3" autocomplete="off">)<br>
(x4,y4)=(<input id="x4" autocomplete="off">,<input id="y4" autocomplete="off">)<br>
(x5,y5)=(<input id="x5" autocomplete="off">,<input id="y5" autocomplete="off">)<br>
  
page.cropBox.upperLeft = (<span id="output1"></span>,<span id="output2"></span>)<br>
page.cropBox.lowerRight = (<span id="output3"></span>,<span id="output4"></span>)<br>

JavaScript

var x1 = $('#x1');
var x2 = $('#x2');
var x3 = $('#x3');
var x4 = $('#x4');
var x5 = $('#x5');

var y1 = $('#y1');
var y2 = $('#y2');
var y3 = $('#y3');
var y4 = $('#y4');
var y5 = $('#y5');

var output1 = $('#output1');
var output2 = $('#output2');
var output3 = $('#output3');
var output4 = $('#output4');

$('#x1,#x2,#x3,#x4,#x5,#y1,#y2,#y3,#y4,#y5').on('keyup', function () {
  output1.html(x1.val()*(x4.val()-x2.val())/(x3.val()-x2.val()));
  output2.html((1-y4.val()/y3.val())*y1.val());
  output3.html(x1.val()*(x5.val()-x2.val())/(x3.val()-x2.val()));
  output4.html((1-y5.val()/y3.val())*y1.val());
});