JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<div>
  <textarea id="texto"></textarea>
  <br>
  <br>
  <input type="button" value="Adicionar texto" onclick="AddConteudo()" />
</div>
<div id="ConteudoMateria"></div>

CSS

div {
  float: left;
  width: 100%;
  max-width: 900px
}

#ConteudoMateria {
  float: left;
  width: 100%;
  max-width: 900px
}

.DivPadrao {
  float: left;
  width: 100%;
  font-family: arial;
  helvetica;
  font-size: 14px;
  line-height: 20px;
  margin-top: 30px
}

textarea {
  width: 100%;
  height: 90px;
  font-family: arial, helvetica;
  font-size: 14px;
  color: #333;
  padding: 10px;
  box-sizing: border-box
}

input[type="button"] {
  background-color: #333;
  font-size: 13px;
  color: #fff;
  border: 0px;
  height: 30px;
  width: 200px
}

</style>

JavaScript

window.AddConteudo = function() {
  var texto = $('#texto').val();
  $('#texto').val('');
  $('#ConteudoMateria').append('<div class="DivPadrao">' + texto + '<br><a href="#" class="MoveUp">Mover p/ cima</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" class="MoveDown">Mover p/ baixo</a></div>');
}

function MoverBlocoConteudo(index, moveUp) {
  var itemlist = $('#ConteudoMateria');
  var len = $(itemlist).children().length;

  var thisElement = jQuery($(itemlist).children().eq(index));
  var nextPosition = (moveUp) ? index - 1 : index + 1;

  if (moveUp) {
    jQuery($(itemlist).children().eq(nextPosition)).before(thisElement);
  } else if (!moveUp) {
    jQuery($(itemlist).children().eq(nextPosition)).after(thisElement);
  }
}

$(document).ready(function() {

  $("#ConteudoMateria").on('click', '.MoveUp, .MoveDown', function(e) {
    e.preventDefault();
    var index = $(this).parents('.DivPadrao').index();
    var isMoveUp = $(this).hasClass('MoveUp');
    MoverBlocoConteudo(index, isMoveUp)
  });
});