JSFiddle - React, Tailwind, and code Playground

by KomathiKarunakaran

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.0/summernote.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.0/summernote.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="col-md-6">
  <div class="panel panel-default">
    <div class="panel-heading">Ressources</div>
    <div class="panel-body" style="max-height:200px;overflow:auto;">
      <div class="list-group modules" id="ressourcesList">

        <a href="#" class="list-group-item" id="item1"> Resource 1
					<button type="button" class="btn btn-success btn-xs addResource pull-right" target="module_descr">Ajouter au module</button></a>

        <a href="#" class="list-group-item" id="item2"> Resource 2
					<button type="button" class="btn btn-success btn-xs addResource pull-right" target="module_descr">Ajouter au module</button></a>

        <a href="#" class="list-group-item" id="item3"> Another Resource
					<button type="button" class="btn btn-success btn-xs addResource pull-right" target="module_descr">Ajouter au module</button></a>


      </div>

    </div>
  </div>

  <div class="row" id="module_info">
    <div class="panel panel-info">
      <div class="panel-heading">
        <div class="row">
          <div class="col-md-9 title_descr"></div>
          <div class="col-md-3 text-right">
            
            <button type="button" class="btn btn-info btn-sm edit" target="module_descr">Edit</button>
            <button type="button" class="btn btn-success btn-sm save"...

CSS

.save {
  display: none;
}

.slide-placeholder {
    
    background: #DADADA;
    position: relative;
}
.slide-placeholder:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 15px;
    background-color: #FFF;
}

JavaScript

// when edit
$('.edit').on('click', function() {
  var target = $(this).attr('target');

  $(this).parent().find('.save').show();
  $(this).parent().find('.edit').hide();
  $('#module_descr').summernote({
    height: 300,
    toolbar: [
      ['img', ['picture']],
      ['style', ['style', 'addclass', 'clear']],
      ['fontstyle', ['bold', 'italic', 'ul', 'ol', 'link', 'paragraph']],
      ['fontstyleextra', ['strikethrough', 'underline', 'hr', 'color', 'superscript', 'subscript']]

    ]
  });
});

$('.addResource').on('click', function() {
	var resourceId = $(this).parent().attr('id');
  console.log($('#3'));
  console.log($('#item2'));

  mydiv = $('<div><p>test paragraph</p></div>');
  console.log("I created a div : ", mydiv);
  var node = document.createElement('div');
  //node.textContent = "This is a DIV node\nAgain some text</br>";

  node.innerHTML = '<div class="col-md-12 resourceadded"><span class="handle button glyphicon glyphicon-move"></span><button class="btn btn-info " contenteditable="false" data-toggle="collapse" data-target="#demo_'+ resourceId + '">Collapsible '+ resourceId + '</button><div contenteditable="false" id="demo_'+ resourceId + '" class="collapse">Lorem ipsum dolor text....</div><br/><br/></div>';

  node.setAttribute("class", "test");

	
  // @param {Node} node
  $('#module_descr').summernote('insertNode', node);
	$('#module_info').find('.save').show();
  $('#module_info').find('.edit').hide();
});

// when saving title or description
$('.save').on('click', function() {


  $('#module_descr').summernote('destroy');
  $(this).parent().find('.save').hide();
  $(this).parent().find('.edit').show();




});




$("#module_descr").sortable({
     placeholder: 'slide-placeholder',
    axis: "y",
    revert: 150,
    start: function(e, ui){
        
        placeholderHeight = ui.item.outerHeight();
        ui.placeholder.height(placeholderHeight + 15);
        $('<div class="slide-placeholder-animator" data-height="' + placeholderHeight...