How to track changes in input fields?

Question

JavaScript

For a week now I can not cope with this task as it is necessary.
I have this situation:
There is a sidebar that contains buttons. These buttons have their own value, name and onclick method.
The main page has two input fields and one compare button.
You need the following:
1) The input fields are empty and, accordingly, the comparison button is disabled;
2) When you click on some button from the sidebar, the name of this button should be transferred to the first field. The compare button is still disabled. When clicking on another button from the sidebar, the name of that button should be passed to the second field. Now the compare button is enabled, but if the text in the two fields is the same, then the compare button is still disabled;
3) Now the user has decided that he must manually edit the text of the second field and he deletes some characters from there. If the received text does not match any button names from the sidebar, then the compare button is disabled, if it matches, then the compare button is enabled.
4) The user again decided to edit the second field. Regardless of what changes have been made there, if he clicks on any button on the sidebar, then the name of that button should appear in the second field.
5) The user again decides that he should edit the field, but now it will be the first field. Everything is the same here as with the second field, only one note, if he has already moved to this field, regardless of whether he made changes there or not, further pressing the buttons on the sidebar should not change the value of the second field (as I always do turns out), and the value of the first field.
Thank you very much for your time, I will be very grateful if you help.
And here is the Codepen code itself .

<div id="main">
    <input id="A" type="text" value="" name="A"/>
    <input id="B" type="text" name="B"/>
    <button id="compare" type="button">Compare</button>
</div>

<div id="sidebar">
    <button class="btn" type="button" value="One" onclick="projectClick('One')">One</button>
    <button class="btn" type="button" value="Two" onclick="projectClick('Two')">Two</button>
    <button class="btn" type="button" value="Three" onclick="projectClick('Three')">Three</button>
    <button class="btn" type="button" value="Four" onclick="projectClick('Four')">Four</button>
</div>

Answer 1

Quickly, something like this: