如何在没有jquery的情况下使用javascript编辑表中的行

Question

<div class="form-group">
            <label for="">Name</label>
            <textarea id="name" class="form-control" placeholder="Enter Name" cols="30" rows="5"></textarea>
        </div>  
        <div class="form-group">
            <label for="">A</label>
            <input type="text" id="ans1" class="form-control" placeholder="Enter Answer">
        </div>  
        <div class="form-group">
            <label for="">B</label>
            <input type="text" id="ans2" class="form-control" placeholder="Enter Answer">
        </div>  
        <div class="form-group">
            <label for="">C</label>
            <input type="text" id="ans3" class="form-control" placeholder="Enter Answer">
        </div>  
        <div class="form-group">
            <label for="">D</label>
            <input type="text" id="ans4" class="form-control" placeholder="Enter Answer">
        </div>  

我已经动态创建了一个编辑按钮。现在我想要的是通过单击编辑图标来更改行单元格的值。我还添加了带有编辑图标的eventListener。

     function createIcon(className,fn,id) {
        var icon=document.createElement('i');
        icon.className=className;
        icon.setAttribute('qid', id);
        icon.addEventListener('click', fn);
        return icon;
      }

     function edit(){
        console.log("Edit Call ",this);
        var id=this.getAttribute('qid',id);
        document.querySelector('#name').innerHTML='value';

        }

    function printquestion () {
      td.appendChild(createIcon('fas fa-edit',edit,questionObject.id));
     // Where fas fa-edit is font-awesome edit icon class
          }