JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form">
	<label>Item name:</label>	<input type="text" id="name"><br>
	<label>Deadline:</label>	<input type="date" id="deadline"><br>
    <label>Image:</label>		<input type="file" id="pic">
    <input id="create" type="button" value="Create" />
</form>

<div id="tbody"></div>

JavaScript

$(function(){
$('#create').click(function () {
    var theName = $('#name').val();
    var theDeadline = $('#deadline').val();
    var pic = document.getElementById("pic").files[0];
    var imgUrl;
    var reader = new FileReader();  
    reader.onload = function(e) {
      var imgURL = reader.result;
      $('#tbody').prepend("<div>" + theName + "<br>" + theDeadline + "<br><img src=" + imgURL + "></div>");

      var tbody = $('#tbody').html();
      localStorage.setItem('tbody', tbody);
      saveDataToLocalStorage(imgURL);
    }
    reader.readAsDataURL(pic);
    return false;
});

$('#tbody').html(localStorage.getItem('tbody'));
return false;
});