Почему отчищаются старые input-поля при добавлении новых?
Потому что когда "добавляется" вложенный тег через `innerHTML`, то и js берет html содержимое, а значение поля, которое ввел в поле, оно никак нигде в DOM дереве не отобразилось в тот момент, откуда и такая проблема
Решения 2:
1. (костыль) при каждом изменении значения полей записывать значения в атрибут value у input-а, так при вызове твоей функции в `innerHTML` будет текущее значение поля и при добавлении нового оно очистится
2. (верный подход) нужно создавать узлы и вставлять их по нормальному, т.е. сначала document.createElement('TAGNAME') а потом parentElement.append(РАНЕЕ_СОЗДАННЫЙ_ТЕГ)
Все дело в строке 
document.getElementById('inputing').innerHTML += str;
Это работает также как и 
document.getElementById('inputing').innerHTML = document.getElementById('inputing').innerHTML + str;
Т.е. в элементе #inputing полностью меняется содержимое. А value у существующих инпутов являются состоянием, а не разметкой, поэтому value сбрасывается в то значение которое установлено в атрибуте value. В вашем случае это пустая строка.
Для того чтобы добиться желаемого поведения вам необходимо создать 'элемент и добавить в #inputing