Save data from modal to file .csv

General
1

Hi everyone. i have a problem with my modal. When i test my modal i find that i can only send data once. i cannot save another one only if i deploy the project.
when i reopen my modal and want to write another data i find the input field disabled and i recieve this in my console
any idea PLEASE.?

/* The Modal (background) */
body {font-family: Arial, Helvetica, sans-serif;}

  /* The Modal (background) */
  .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }

  /* Modal Content */
  .modal-content {
      position: relative;
      background-color: #e6e6e6;
      margin: auto;
      padding: 0;
      border: 1px solid #888;
      width: 50%;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
      -webkit-animation-name: animatetop;
      -webkit-animation-duration: 0.4s;
      animation-name: animatetop;
      animation-duration: 0.4s
  }

  /* Add Animation */
  @-webkit-keyframes animatetop {
      from {top:-300px; opacity:0}
      to {top:0; opacity:1}
  }

  @keyframes animatetop {
      from {top:-300px; opacity:0}
      to {top:0; opacity:1}
  }

  /* The Close Button */
  .close,.close_f {
      color: #004d66;
      float: right;
      font-size: 28px;
      font-weight: bold;
  }

  .close:hover,
  .close_f:hover,
  .close:focus,
  .close_f:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
  }

  .modal-header {
      padding: 20px 16px;
      background-color: #004d66;
  }

  .modal-body {padding: 2px 16px;}

  .modal-footer {
      padding: 20px 16px;
      background-color: #004d66;
  }
#outer
{
    width:100%;
    text-align: center;
}
.inner
{
    display: inline-block;
}
#myBtn1,#myBtn2,#myBtn3,#myBtn4,#myBtn5 {
   background-color: #004d66;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
  i {
    padding-right: 0.3em;
  }
}

</style>

<!-- Trigger/Open The Modal -->

<div id="outer">
  <div class="inner"><button class="inner" id="myBtn1">Button1</button></div>
  <div class="inner"><button class="inner" id="myBtn2">Button2</button></div>
  <div class="inner"><button class="inner" id="myBtn3">Button3</button></div>
  <div class="inner"><button class="inner" id="myBtn4">Button4</button></div>
  <div class="inner"><button class="inner" id="myBtn5">Button5</button></div>
</div>

<!-- The Modal -->
<div id="myModal"  class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
    <span class="close">&times;</span>
    <h2>Saisie votre matricule</h2>
    </div>
    <div class="modal-body">
    <h3>Matricule :</h3> <br>
       <input type="number" ng-model="msg.payload.data3" id="matricule" name="matricule" size="100"><br><br>
         <button  id="myBtn_m">Entrer</button>
      </div>
    <div class="modal-footer">
</div>
  </div>

</div>


<div id="myModal_f"  class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
    <span class="close_f">&times;</span>
    <h2>Formulaire</h2><br>
    </div>

    <div class="modal-body">
  <h3>Nom : </h3><input type="text" ng-model="msg.payload.data1" id="name" name="Nom" placeholder="Nom" required  size="77"><br><br>
  <h3>Prenom : </h3><input type="text" ng-model="msg.payload.data2" id="prenom" name="Prenom" placeholder="Prenom" required  size="77">  <br><br>
  <md-button id="myBtn_f" ng-click="send(msg)" ng-disabled="(msg.payload.data1 == null) || (msg.payload.data2 == null)">Enregistrer</md-button>
</div>
<div class="modal-footer">
</div>
  </div>

</div>


<script>

    // Get the modal
var modal = document.getElementById('myModal');
var modal_f = document.getElementById('myModal_f');

// Get the button that opens the modal
var btn = document.getElementById("myBtn1");
var btn_m = document.getElementById("myBtn_m");
var btn_f = document.getElementById("myBtn_f");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var span_f = document.getElementsByClassName("close_f")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}
btn_m.onclick = function() {
  var x = document.getElementById("matricule").value;
  if(x == 0 )
    {    alert("Entrer votre matricule");
          return false;
      }
   else{
     modal.style.display = "none";
     modal_f.style.display = "block";
   }

}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}
span_f.onclick = function() {
    modal_f.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if ((event.target == modal)||(event.target == modal_f)) {
        modal.style.display = "none";
        modal_f.style.display = "none";

    }
}
</script>