Как отслеживать изменения в полях для ввода?

Question

[Alisa94]

Уже неделю не могу справиться с этой задачей так, как необходимо.
Имею такую ситуацию:
Есть сайдбар, в котором содержатся кнопки. Эти кнопки имею своё значение, имя и метод onclick.
На главной странице есть два поля ввода и одна кнопка для сравнения.
Нужно следующее:
1) Поля для ввода пустые и, соответственно, кнопка сравнения выключена;
2) При нажатии на какую-то кнопку из сайдбара, имя этой кнопки должна передаться в первое поле. Кнопка сравнения по прежнему выключена. При нажатии на другую кнопку из сайдбара, имя этой кнопки должна передаться во второе поле. Сейчас кнопка сравнения включилась, но если текст в двух полях одинаковый, то кнопка сравнения по прежнему выключена;
3) Теперь пользователь решил, что он должен вручную отредактировать текст второго поля и он оттуда удаляет какие-то символы. Если полученный текст не соответствует ни одному имени кнопок из сайдбара, то кнопка сравнения выключается, если же она соответствует, то кнопка сравнения включается.
4) Пользователь снова решил отредактировать второе поле. Независимо от того, какие изменения там были внесены, если он нажмёт на какую-то кнопку на сайдбаре, то имя этой кнопки должна появиться во втором поле.
5) Пользователь снова решает, что он должен отредактировать поле, но сейчас это будет первое поле. Тут всё так же как и со вторым полем, только одно примечание, если он уже перешёл на это поле, независимо от того внёс он там изменения или нет, дальнейшие нажатия на кнопки на сайдбаре должна менять не значение второго поля(как у меня это всегда получается), а значение первого поля.

Спасибо большое за уделённое время, буду очень благодарен, если поможете.

А вот и сам код Codepen.

<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

[Артем Чернявский]

На скорую руку, как-то так:

Comments

[Alisa94]

Это то что надо, спасибо вам большое добрый человек.

[Артем Чернявский]

Пожалуйста

[Alisa94]

Артем Чернявский, Есть маленькая проблема. Когда я нажимаю на кнопку One потом на Two, потом удаляю последнюю букву One оставляя On, затем удаляю последнюю букву Two оставляя Tw и потом сразу же добавляю "o" сделав её Two, тогда кнопка сравнения активизируется, хотя первое поле некорректное.