I'm new to javascript. I have created a page that includes an add and a **disabled** unfriend button. Each button fetches a data id from the registration page. 

The add button is a link to a prompt box. The data entered into the prompt box will be inserted into the database. Once completed, the unfriend button will be enabled. Before that, users cannot click it. To avoid users clicking the add button many times, I add the **disable option** after they click it. Now, my problem is that data can be inserted but the unfriend button cannot be clicked. I have already tried a lot of tutorials but haven't fixed the problem. Can anyone help me to solve my problem? Thanks a lot in advance! Below is my code and the form.

```
<html>
  <script>
    function myFunction(form){
      var subject = prompt("Please enter Subject that want to study");
      var btn = document.getElementById("btn");
      var add = document.getElementById("add");
      btn.disabled=false;
      add.disabled=true;
      if (subject != null){
        form['subject'].value= subject;
        form['add'].value="request sent";
      }
      form.submit();
    }

  function unfriend(form){
    var btn = document.getElementById("btn");
    var add = document.getElementById("add");
    add.disabled=false;
    btn.disabled=true;
    add.value="Add friend"; 
  }
</script>
<body>
  <form method="post" id="form" enctype="multipart/form-data" autocomplete="off"> 
    <input type="hidden" name="id" value="<?php echo $row['register_ID'];?>" />
    <input type="hidden" id="subject" name="subject" data-uid=<?php echo $_SESSION['sid'] ;?>/>
    <td>
      <input type="submit" onclick="myFunction(form);" name="addfriend" data-type='addfriend' id="add" class="btn" value="add" onchange="document.getElementById('btn').disabled = false" />                  
      <input type="submit" value="unfriend" id="btn"  onclick="unfriend(form);" disabled="" />
    </td>
  </form>
</body>
</html>

```