<style>
.d-none {
  display:none;
}
</style>

<section>

<div class="d-none">
<h1>Hello</h1>
</div>


<form method="POST">
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">website</th>
      <th scope="col">Contact</th>
      <th scope="col">email</th>
      <th scope="col">[e]</th>
    </tr>
  </thead>

  <input hidden name="region" value="<%= region %>">

  <tbody>

  <% for (var i=0; i<docs.length; i++) { %>

    <tr id="collapsed-<%= i %>">
      <th scope="row"><%= i %><input hidden name="id-<%= i %>" value="<%= docs[i].id || '' %>"></th>
      <td><input name="name-<%= i %>" value="<%= docs[i].name %>"></td>
      <td><input name="website-<%= i %>" value="<%= docs[i].website %>"></td>
      <td><input name="contact-<%= i %>" value="<%= docs[i].contact %>"></td>
      <td><input name="email-<%= i %>" value="<%= docs[i].email %>"></td>
      <td id="expand-<%= i %>" onclick="expand (<%= i %>);">▼</td>
      </div>
      <span>
    </tr>

    <tr id="expanded-<%= i %>" class="d-none mt-3 mb-3">
      <th scope="row"><%= i %><input hidden name="id-<%= i %>" value="<%= docs[i].id || '' %>"></th>
      <td colspan="4">
      <table>
      <tr>
      <th>Full Address:</th>
      <th>Contacts:</th>
      </tr>
      <td>
        <input name="name-expanded-<%= i %>" size="30"><br/>
        <input name="street-<%= i %>" size="30"><br/>
        <input name="zip-<%= i %>" size="5"> <input name="place-<%= i %>" size="24"><br/>
      </td>
      <td>
        Name 1: <input name="contact-expanded-<%= i %>">  email: <input name="email-expanded-<%= i %>"><br/>
        Name 2: <input name="contact2-<%= i %>"> email: <input name="email2-<%= i %>"><br/>
        Name 3: <input name="contact3-<%= i %>"> email: <input name="email3-<%= i %>"><br/>
      </td>


      </table>
      </td>
      <td id="collapse-<%= i %>" onclick="collapse (<%= i %>);">▲</td>
    </tr>

    <% } %>

  </tbody>
</table>

<button type="submit">Submit</button>
</form>

</section>

<script>

function expand (e) {
  document.getElementById ("collapsed-"+e).classList.add ("d-none");
  document.getElementById ("expanded-"+e).classList.remove ("d-none");

  document.getElementsByName ("name-expanded-"+e)[0].value = document.getElementsByName ("name-"+e)[0].value;
}

function collapse (e) {
  document.getElementById ("collapsed-"+e).classList.remove ("d-none");
  document.getElementById ("expanded-"+e).classList.add ("d-none");

  document.getElementsByName ("name-"+e)[0].value = document.getElementsByName ("name-expanded-"+e)[0].value;
}


</script>
