JSFiddle - React, Tailwind, and code Playground

by cory a

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container-fluid">
  <br>
  <div class="panel panel-default">
	<div class="panel-heading">
      <div class="row">
		<div class="col-md-4">
          <i class="fa fa-file-text-o fa-lg"> Lesson: <span class="inputspan" contenteditable="true">Edit</span></i>
		</div>
		<div class="col-md-4">
          <i class="fa fa-book fa-lg"> Subject: <span class="inputspan" contenteditable="true">Edit</span></i>
		</div>
		<div class="col-md-4">
          <i class="fa fa-graduation-cap fa-lg"> Grade: <span class="inputspan" contenteditable="true">Edit</span></i>
		</div>
      </div><!--/row-->
    </div><!--/panel head-->
      
  </div><!--/panel-->
	<div class="row">
		<div class="col-md-4">
          <div class="panel panel-default bigidea cont">
            <div class="panel-heading">
              	<div class="floatbtn"><a href="#" class="btn btn-primary btn-circle" data-add="Big Idea"><i class="fa fa-plus"></i></a></div>
              <h3 class="panel-title"><i class="fa fa-lightbulb-o fa-lg"> Big Idea(s)</i></h3>
  			</div>
            <div class="panel-body">
              
            	<ul class="list-group" id="ideaList">
             	 
           		 </ul>
            </div><!--/body-->
          </div><!--/panel-->
          
          
      </div><!--/col4-->
		<div class="col-md-4">
          <div class="panel panel-default">
            <div class="panel-heading">
              <div class="floatbtn"><a href="#" class="btn btn-primary btn-circle"><i class="fa fa-plus"></i></a></div>
              <h3 class="panel-title"><i class="fa fa-certificate fa-lg"> Outcomes</i></h3>
            </div><!--/header-->
            <div class="panel-body">
              <ul class="list-group" id="outList">
            	
             </ul>
            </div><!--/body-->
          </div><!--/panel-->        
          
      </div><!--/col4-->
      <div...

CSS

.fa{
  font-weight:bold;
}
.inputspan:focus {
    background-color: yellow;
}
      
.center {
  text-align: center;
  }
.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.42;
  border-radius: 15px;
}
      .floatbtn {
    	float: right;
      }

JavaScript

$(".btn-circle").click(function() {
 var btn = $(this).data('add')
 $("#savePopBtn").removeClass()
 var popBody;
 var popTitle;
 var returnItem;  
 switch(btn){
     
   case "Big Idea":
     popBody = "<textarea class='form-control ideatxt' rows='2' >"
     $("#savePopBtn").addClass("btn btn-primary idea")
     break;
   case "Assessment":
     popBody = "<label for='assessDrop'>Select Assessment Strategy:</label>" +
         "<select class='form-control' id='assessDrop'>" +
     	"<option>Anecdotal Notes</option><option>Checklist | Rubric</option><option>Conference</option>" +
        "<option>Exit Card</option><option>Media Presentation</option><option>Object Creation</option>" +
         "<option>Oral Response</option><option>Observation</option><option>Oral Presentation</option>" +
         "<option>Peer Review</option><option>Tracking Log</option><option>Quiz | Test</option><option>Self Assessment</option>" +
         "<option>Written Response</option><option>Other</option></select>"+
         "<p>Type of Assessment:<p>" +
         "<label class='radio-inline'><input type='radio' name='assess' value='For'> For Learning</label>" +
         "<label class='radio-inline'><input type='radio' name='assess'  value='As'> As Learning</label>" +
         "<label class='radio-inline'><input type='radio' name='assess'  value='Of'> Of Learning</label>"
     $("#savePopBtn").addClass("btn btn-primary assess")
     break;
     case "Differentiation":
         popBody = ""
         
     $("#savePopBtn").addClass("btn btn-primary diff")
     break;
   default:
     
 }
 $("#inputPopBody").html(popBody)
 $("#inputPopTitle").html(btn)
 $("#inputPop").modal('show')
});
//save popup
$("#savePopBtn").click(function() {
    var txt;
    if($(this).hasClass("idea")) {  
        txt = $(".ideatxt").val()
    	 $("#ideaList").append("<li class='list-group-item' >"+txt+
            "<button type='button' class='close'><span aria-hidden='true'> ×</span></button></li>")
    } else if...