JSFiddle - React, Tailwind, and code Playground

by javalover_stackoverflow

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js"></script>
<div class="tabbable" id="myTabs"> 
<ul class="nav nav-tabs"> 
 
<li class="active"><a href="#tab1" data-toggle="tab">Send Message</a></li> 
<li><a href="#tab2" data-toggle="tab">Users</a></li> 
<li><a href="#tab3" data-toggle="tab">Group Message</a></li> 
<li><a href="#tab5" data-toggle="tab">logs</a></li> 
<li><a href="#tab4" data-toggle="tab" id="signout">Sign Out</a></li> 
</ul> 
<div class="tab-content"> 
<div class="tab-pane active" id="tab1"> 
<div class="btn-group-vertical pull-right" data-toggle="buttons-radio">


  <button type="button" class="btn btn-primary btn-block" id="h"></button>




%></div>
<div class="container">
		<div class="row">
			<div class="span12">
				<h3>Send SMS to Individual number</h3>
				<form class="form-signin" action="#" method="post" onsubmit="return false;">
					<div class="row-fluid">
						<div class="span3">
							Enter Number to send:
						</div>
						<div class="span3">
<!-- <input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+" rel="popover"/> -->
<!--<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+" rel="popover" data-trigger="hover" data-delay='{"show":"10", "hide":"3000"}'/>-->
<input type="text" name="toNumber" id="number"...

JavaScript

var val=" ";
$(function() {
$("#datetimepicker").datetimepicker({
format: "dd/MM/yyyy hh:mm:ss",
linkField: "#txt",
linkFormat: "yyyy mm dd hh:ii",
autoclose: true,
});

jQuery('#datetimepicker').datetimepicker().on('changeDate', function(ev){



var chk=$(".darea1").val();
chk=chk.replace(val, "");;
$(".darea1").val(chk);

$(".darea1").val($( ".darea1" ).val()+$( "#txt" ).val());
val=$( "#txt" ).val();



});

});
$('#tabAll').click(function(){ 
$('#tabAll').addClass('active'); 
$('.tab-pane').each(function(i,t){ 
$('#myTabs li').removeClass('active'); 
$(this).addClass('active'); 
}); 
}); 
$('body').on('click', '.btn', function(){ 
if(this.id=='openAlert')
    {$('#number').val('');}else{$('#number').val(this.id);}
});
$(document).ready(function(){
$("#signout").click(function() { 
    window.location.replace("logout.jsp"); 
});
//next line
/*var val=0;
$(document).ready(function(){


  $('#btn1').click(function(){
      if($(".span4").val()!="")
      {
  $("#mytable").append('<tr id="mytr'+val+'"></tr>');
  $("#mytr"+val).append('<td class=\"cb\"><input type=\"checkbox\" value=\"yes\" name="mytr'+val+'" checked ></td>');
  
             $(".span4").each(function () {
			
			 $("#mytr"+val).append("<td >"+$(this).val()+"</td>");
                
              });
			  val++;
      }
      else
      {
          alert("please fill the form completely");
      }
              });
    $('#btn2').click(function(){
        var creat_group=confirm("Do you want to creat a group??");
        if(val>1){
           alert(creat_group);
            
                 
              }
    });
          
            
          

});*/
var val = 0;
var groupTrCount = 0;
$(document).ready(function () {
// group sending sms
$('#hi').on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    var $collapse = $this.closest('.collapse-group').find('.collapse');
    $collapse.collapse('toggle');
});
//
    var obj={};
    $('#btn1').click(function () {
       ...