JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://intern.ifmsa.nl/leden/webcam/webcam.js"></script>
<form name="htmlform" method="post" enctype="multipart/form-data" action="<?php $_SERVER['PHP_SELF'] ?>">
  <label>Voornaam</label>
  <input type="text" name="voornaam">
  <br>
  <label>Email</label>
  <input type="email" name="email">
  <br>
  <label>Photo</label>
  <div>
    <input name="foto" type="file">
        <input type="button" id="foto_maken" value="Or make another one"/>
    <input id="webcam" type="hidden" name="webcam" value="">
  </div>
  <br>

  <div id="results"></div>
  <div id="my_camera" style="display: none; clear: left;"></div>

  <div id="pre_take_buttons">
    <input type="button" id="maak_foto" value="Take photo" onClick="preview_snapshot(); return false;">
  </div>
  <div id="post_take_buttons" style="display:none;">
    <input type="button" value="Another photo" onClick="cancel_preview(); return false;">
    <input name="webcamdefi" id="foto_gebruiken" type="button" value="Use photo" onClick="save_photo(); return false;">
  </div>

  <label>Confirm password</label>
  <input name="pass" type="password" required>
  <input class="submit" type="submit" name="submit" value="Wijzigen">
</form>

JavaScript

Webcam.set({
  width: 400,
  height: 300,
  //dest_width: 400,
  //dest_height: 300,
  image_format: 'jpeg',
  jpeg_quality: 80
});

$("#maak_foto").hide();
$("#foto_maken").click(function() {
  Webcam.attach('#my_camera');
  $("#maak_foto").show();
  $("#my_camera").show();
  $("#foto_form").show();
});
$("input#foto_gebruiken").click(function() {
  $("#my_camera").hide();
  $("#pre_take_buttons").hide();
});

function preview_snapshot() {
  Webcam.freeze();
  // swap button sets
  document.getElementById('pre_take_buttons').style.display = 'none';
  document.getElementById('post_take_buttons').style.display = '';
}

function cancel_preview() {
  Webcam.unfreeze();
  // swap buttons back
  document.getElementById('pre_take_buttons').style.display = '';
  document.getElementById('post_take_buttons').style.display = 'none';
}

function save_photo() {
  // actually snap photo (from preview freeze) and display it
  Webcam.snap(function(data_uri) {
    // display results in page
    document.getElementById('results').innerHTML =
      'Jouw foto:<br>' +
      '<img src="' + data_uri + '"/>';
    // swap buttons back
    document.getElementById('pre_take_buttons').style.display = '';
    document.getElementById('post_take_buttons').style.display = 'none';

    var raw_image_data = data_uri.replace(/^data\:image\/\w+\;base64\,/, '');
    document.getElementById('webcam').value = raw_image_data;
    //document.getElementById('wijzigen').submit();
  });
}