JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>

<div class="__hero-container">
  <div class="to-do-container">
    <div id="div_input">
      <p class="form-text">Title:</p>
      <input type="text" id="post_title" />
      <br>
      <p class="form-text">Content:</p>
      <textarea columns="100" rows="5" id="post_text"></textarea>
      <br>
      <button id="form_submit">ADD TASK</button>
      <div class="task-break">
      </div>
    </div>

    <div id="task_list">
    </div>
  </div>
</div>

CSS

body {
  background-color: #e6e6e6;
  border: 1px dashed rgba(255, 0, 0, 0.4);
}

.__hero-container {
  width: 960px;
  margin: 0 auto;
  border: 1px dashed rgba(255, 0, 0, 0.4);
}

.__hero-container .to-do-container {
  background-color: #fff;
  border: 1px solid #cbcbcb;
  width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

.__hero-container .to-do-container .form-text {
  text-align: left;
  padding: 10px 20px 10px 20px;
  display: inline-block;
  width: 70px;
  color: #636363;
}

.__hero-container .to-do-container input {
  display: inline-block;
  height: 30px;
  width: 80%;
  margin: 10px 20px 10px 20px;
}

.__hero-container .to-do-container textarea {
  display: inline-block;
  width: 80%;
  margin: 10px 20px 10px 20px;
  vertical-align: top;
  resize: vertical;
}

.__hero-container .to-do-container #form_submit {
  float: right;
  height: 30px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 20px;
  background-color: #378afd;
  border: 3px solid #296bc4;
  color: #fff;
}

.__hero-container .to-do-container #form_submit:hover {
  background-color: #5e9dfe;
  cursor: pointer;
}

.__hero-container .to-do-container #form_submit:active {
  background-color: #1c77f0;
  cursor: pointer;
}

.__hero-container .to-do-container .task-break {
  border-bottom: 1px solid #cbcbcb;
  padding-bottom: 50px;
}

#task_list {
  background-color: #fff;
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 10px;
  margin-bottom: 10px;
}

#task_list h3 {
  color: #484848;
  padding: 0px 10px 0px 20px;
}

#task_list p {
  color: #636363;
  padding: 0px 10px 0px 20px;
}

.seperate-class {
  border: 1px solid #cbcbcb;
  overflow: hidden;
  margin-top: 10px;
  margin-bottom: 10px;
}

.line-break {
  border-bottom: 1px solid #cbcbcb;
  height: 1px;
  width: 100%;
  margin-bottom: 10px;
}

.deleter {
  float: right;
  height: 30px;
  width: 125px;
  margin-bottom: 10px;
  color: #c4233e;
  background-color: #fff;
  border: none;
}

.deleter:hover {
  color:...

JavaScript

/* Always wait until the document is ready first */
$(document).ready(function() {
	/* Cache our selectors for efficiency and to improve the readability of the code */
	var form = $('#form_submit');
  var taskList = $('#task_list');
  var postTitle = $('#post_title');
  var postText = $('#post_text');
  var deleter = '.deleter';
  
  /* Pro tip: you can line break your JS with the plus symbol. There are also better ways to create HTML vis JS, but I'm not a purist so I typically use the below method. Worth reading up on the others though. */
	form.click(function() {
    taskList.append($("<div class='seperate-class'><h3>" + 
    postTitle.val() + 
    "</h3><p>" + 
    postText.val() + 
    "</p><div class='line-break'></div><button class='deleter'>DELETE</button></div>"));
    postTitle.val("");
    postText.val("");
  });
  /* Why use .each for this? This is unnecessarily traversing the DOM on every task add. $.click binds to all elements of a given class by default, but use $.on instead to avoid having to bind the click to new instances every time you add one. In this case, we are binding to the <body> element and listening for '.deleter' classes */
  $('body').on('click', deleter, function(e) {
  	/* when binding to a click, you probably want to prevent the default action e.g. in the case of <a> elements with fragments in the href attribute */
    /* Also, parent what? Be more specific in case you have to add / remove a wrapp around the deleter later- then all it would do is remove the button itself! */
    $(this).closest('.seperate-class').remove();
    /* prevent the default event */
    e.preventDefault();
  });
});