JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<html><head>
<link rel="stylesheet" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<p id="tag"> Задачник</p>  <img id="img1" src="task.png">
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
	<script type="text/javascript">
	$.ajax({
    url: "index.php",
    type: "POST",
    data: 'text='+encodeURIComponent('русский текст тут'),
    dataType: "html",
        success: function(msg){
        }
    }
	);
</script>
    <script type="text/javascript">
$('ul').sortable({
    axis: 'y',
    update: function (event, ui) {
        var data = $(this).sortable('serialize');

        // POST to server using $.post or $.ajax
        $.ajax({
            data: data,
            type: 'POST',
            url: "response.php"
        });
    }
});


    </script> 
<script type="text/javascript">


$(document).ready(function() {
    // Добавляем новую запись, когда произошел клик по кнопке
    $("#FormSubmit").click(function (e) {

        e.preventDefault();

        if($("#contentText").val()==="") //simple validation
        {
            alert("Введите текст!");
            return false;
        }

        var myData = "content_txt="+ $("#contentText").val(); //post variables

        jQuery.ajax({
            type: "POST", // HTTP метод  POST или GET
            url: "response.php", //url-адрес, по которому будет отправлен запрос
            dataType:"text", // Тип данных,  которые пришлет сервер в ответ на запрос ,например, HTML, json
            data:myData, //данные, которые будут отправлены на сервер (post переменные)
            success:function(response){
            $("#responds").append(response);
            $("#contentText").val(''); //очищаем текстовое поле после успешной вставки
            },
           ...

CSS

button#FormSubmit{
	width: 150px;
	height: 35px;
	position:absolute;
	left: 62%;
	top: 10%;
	cursor: pointer;
	display: inline-block;
  color: black;
  font-weight: 700;
  text-decoration: none;
  user-select: none;
  padding: .5em 2em;
  outline: none;
  border: 2px black;
  border-radius: 1px;
  transition: 0.2s;
}
textarea#contentText{
	width: 540px;
	height: 35px;
	position:absolute;
	left: 28%;
	top: 10%;
	border: groove 3px black;
    resize: none;
}
ul#responds{
	
	position:absolute;
	left: 28%;
	top: 16%;
	
	width: 495px;
    height: 600px;
	border: groove 3px black;
	overflow: scroll;
	border-radius: 8px;

	
	
}
li{
	margin: 12px;
	border-bottom: solid 1px black;
	cursor: pointer;
	
	
    
}
img{
    position: relative;
    top: -17px;
    width: 15px;
    float: right;
	margin-left: 15;
}
.editbox{
	display: none;
	margin-top: 12px;
	width: 470;
}
#tag{
	font-size: 200%;
	position:absolute;
	top: -13;
	left: 40%;
	font:monospace;

}
#img1{
	width:40;
	position:absolute;
	top: 20;
	left: 48%
}

JavaScript

$(document).ready(function() {
    // Добавляем новую запись, когда произошел клик по кнопке
    $("#FormSubmit").click(function (e) {

        e.preventDefault();

        if($("#contentText").val()==="") //simple validation
        {
            alert("Введите текст!");
            return false;
        }

        var myData = "content_txt="+ $("#contentText").val(); //post variables

        jQuery.ajax({
            type: "POST", // HTTP метод  POST или GET
            url: "response.php", //url-адрес, по которому будет отправлен запрос
            dataType:"text", // Тип данных,  которые пришлет сервер в ответ на запрос ,например, HTML, json
            data:myData, //данные, которые будут отправлены на сервер (post переменные)
            success:function(response){
            $("#responds").append(response);
            $("#contentText").val(''); //очищаем текстовое поле после успешной вставки
            },
            error:function (xhr, ajaxOptions, thrownError){
                alert(thrownError); //выводим ошибку
            }
        });
    });

    //Удаляем запись при клике по крестику
    $("body").on("click", "#responds .del_button", function(e) {
        e.preventDefault();
        var clickedID = this.id.split("-"); //Разбиваем строку (Split работает аналогично PHP explode)
        var DbNumberID = clickedID[1]; //и получаем номер из массива
        var myData = 'recordToDelete='+ DbNumberID; //выстраиваем  данные для POST

        jQuery.ajax({
            type: "POST", // HTTP метод  POST или GET
            url: "response.php", //url-адрес, по которому будет отправлен запрос
            dataType:"text", // Тип данных
            data:myData, //post переменные
            success:function(response){
            // в случае успеха, скрываем, выбранный пользователем для удаления, элемент
            $('#item_'+DbNumberID).fadeOut("slow");
            },
            error:function (xhr, ajaxOptions, thrownError){
                //выводим...