lordenas,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var $col = $(".field-slider p");
for (var i = 0; i < 5; i++) {
$(".field-slider p:eq(" + i + ")").css({
"float": "left"
});
$(".field-slider p:eq(" + i + ")").after('<div style="height: 20px;"><img class="newtitle" style="width: 13px;margin: 5px 10px 0 10px; cursor: pointer;float: left;" src="https://png.icons8.com/metro/50/000000/pencil.png"><input class="valuetext" style="margin: 0 0 0 29px; border: 1px solid #d5d5d5; width: 200px; border-radius: 3px; display: none;" type="text"></div>');
}
$("#viewing_panel").on("click", ".newtitle", function() {
$(".valuetext").hide();
$(this).next().stop().show();
}).on("focusout", ".valuetext", function() {
var index = $(".valuetext").hide().index(this) + 5,
$newtext = $(this).val();
$(this).parent().prev().html($newtext);
$col.eq(index).html($newtext);
});
});
</script>
</head>
<body>
<div id="viewing_panel">
<div class="field field-slider">
<div class="field-title">
<p>Описание 1</p>
</div>
</div>
<div class="field field-slider">
<div class="field-title">
<p>Описание 2</p>
</div>
</div>
<div class="field field-slider">
<div class="field-title">
<p>Описание 3 </p>
</div>
</div>
<div class="field field-slider">
<div class="field-title">
<p>Описание 4</p>
</div>
</div>
<div class="field field-slider">
<div class="field-title">
<p>Описание 5</p>
</div>
</div>
<div class="field field-slider">
<div class="field-title">
<p>Описание 2-1</p>
</div>
</div>
<div class="field field-slider">
<div class="field-title">
<p>Описание 2-2</p>
</div>
</div>
<div class="field field-slider">
<div class="field-title">
<p>Описание 2-3 </p>
</div>
</div>
<div class="field field-slider">
<div class="field-title">
<p>Описание 2-4</p>
</div>
</div>
<div class="field field-slider">
<div class="field-title">
<p>Описание 2-5</p>
</div>
</div>
</div>
</body>
</html>