Cannot modify html using javascript?

Question

I have made 3 div tags in index.html page:

1) div with id="contactlist" populate with all contact list

2) div with id="addnewcontact" displays subit form

3) div with id="editcontact" displays form to edit details

On whenever I click on edit button it shows the form to edit details but if I click on add button which is in upper-right corner (see screenshot) then page displays 2 forms edit form and add new form.

When I click on edit button it should only display edit form and when I click on add button in upper right corner it should only display add new contact form.

To produce above error first click on edit button and then click on add button in upper right corner.

index.html:

  <div id="contactlist" >

  </div>


  <div id="addnewcontact">


  </div>


  <div id="editcontact">

  </div>

In app.js:

function editContact(id) {
    document.getElementById("search").style.display = 'none';
    document.getElementById("contactlist").style.display = 'none';
    document.getElementById("editcontact").style.display = '';
    document.getElementById("editcontact").innerHTML = 
        `
        <form>
          <div class="form-group">
            <label for="InputName">Name</label>
            <input type="text" class="form-control" id="inputName" aria-describedby="namehelp" value="`+array[id].fullName+`" >
          </div>
          <div class="form-group">
            <label for="InputNumber">Number</label>
            <input type="text" class="form-control" id="inputNumber" value="`+array[id].number+`">
          </div>
          <div class="form-group">
            <label for="InputGroup">Group</label>
            <input type="text" class="form-control" id="inputGroup" value="`+array[id].group+`">
          </div>
          <button type="submit" class="btn btn-primary" onclick="saveMe(`+id+`)">Submit</button>
        </form>
        `;
}


function addNew() {
    document.getElementById("search").style.display = 'none';
    document.getElementById("contactlist").style.display = 'none';
    document.getElementById("addnewcontact").style.display = '';
    document.getElementById("addnewcontact").innerHTML = 
    `
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Name</label>
        <input type="text" class="form-control" id="inputname" aria-describedby="namehelp" placeholder="Enter Name">
      </div>
       <div class="form-group">
        <label for="exampleInputEmail1">Number</label>
        <input type="text" class="form-control" id="inputnumber" aria-describedby="numberhelp" placeholder="Enter Number">
      </div>
      <div class="form-group">
        <label for="exampleInputEmail1">Group</label>
        <input type="text" class="form-control" id="inputgroup" aria-describedby="grouphelp" placeholder="Enter Group">
      </div>
      <button type="submit" class="btn btn-primary" onclick="submittoDB()">Submit</button>
    </form>
    `;
}


function showContacts() {
    for(var i in array){
        var id = i;
        contactlist.innerHTML +=
        `
        <ul>
        <div>
        <p>Name: `+ p1.fullName +`</p>
        <p>Number: `+ p1.number +`</p>
        <p>Group: `+ p1.group +`</p>
        <button type="button" class="btn btn-warning" onclick="editContact(`+ id +`)">Edit</button>
        <button type="button" class="btn btn-danger">Delete</button>
        </div>
        `
    }
}

showContacts();

Js fiddle live demo: https://jsfiddle.net/nca8xx6c/

Answer 1

function editContact(id) {
document.getElementById("search").style.display = 'none';
document.getElementById("contactlist").style.display = 'none';
document.getElementById("editcontact").style.display = '';
document.getElementById("addnewcontact").style.display = 'none';
document.getElementById("editcontact").innerHTML = 
    `
    <form>
      <div class="form-group">
        <label for="InputName">Name</label>
        <input type="text" class="form-control" id="inputName" aria-describedby="namehelp" value="`+array[id].fullName+`" >
      </div>
      <div class="form-group">
        <label for="InputNumber">Number</label>
        <input type="text" class="form-control" id="inputNumber" value="`+array[id].number+`">
      </div>
      <div class="form-group">
        <label for="InputGroup">Group</label>
        <input type="text" class="form-control" id="inputGroup" value="`+array[id].group+`">
      </div>
      <button type="submit" class="btn btn-primary" onclick="saveMe(`+id+`)">Submit</button>
    </form>
    `;
}


function addNew() {
    document.getElementById("search").style.display = 'none';
    document.getElementById("contactlist").style.display = 'none';
    document.getElementById("addnewcontact").style.display = '';
    document.getElementById("editcontact").style.display = 'none';
    document.getElementById("addnewcontact").innerHTML = 
`
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Name</label>
    <input type="text" class="form-control" id="inputname" aria-describedby="namehelp" placeholder="Enter Name">
  </div>
   <div class="form-group">
    <label for="exampleInputEmail1">Number</label>
    <input type="text" class="form-control" id="inputnumber" aria-describedby="numberhelp" placeholder="Enter Number">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Group</label>
    <input type="text" class="form-control" id="inputgroup" aria-describedby="grouphelp" placeholder="Enter Group">
  </div>
  <button type="submit" class="btn btn-primary" onclick="submittoDB()">Submit</button>
</form>
`;
}

Try this code snippet!.