2 inputs that calculate each other

I’m using the Math.js plugin to take the price of something and calculate a percentage of that value. The calculated value is the price times a percentage. There are times that I’d like to change the percentage to know the calculated value and other times when I want to enter the value and know what percentage that is. I can’t seem to find a way to force the calculation anytime after the page loads.

In the image below I have a property price, and the earnest money is set to 1% of that price. Now, I can either change the Percentage field (which updates the Earnest Money amount) or I can update the Earnest Money amount (which then updates the percentage amount). I can do either one but once I do, I cannot go back and change the other one since changing any value overwrites the the dynamic value coming from the Math.js element.

I’d like to be able to change either one, and each time have the other value update. Can anyone think of a way to do this?

image

I found that by putting each element into its own group, I could use the workflow element option to reset the opposite group whenever the value changed.

So, after I change the Earnest Money amount, that change kicks off the workflow action to reset the percentage group which then resets the Percentage input field inside of it…and conversely, when I make a change to the Percentage value, this kicks off the workflow action to reset the earnest money group, and, consequently, the earnest money input element inside of it.