JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class='groupbtn' data-whatdo='edit' data-gid='1'>group 1</div> <div class='groupbtn' data-whatdo='edit' data-gid='2'>group 2</div> <div class='groupbtn' data-whatdo='edit' data-gid='3'>group 3</div> <div class='groupbtn' data-whatdo='create'>+ create</div>


<div class='groupedit'>
<h2><span id='grouptitle'>..</span>
</h2>
<p>Name: <input type='text'id="groupname" maxlength='20'></p>

Description:<br><textarea id="groupdescn"></textarea>

<p id='delopt'>Alternatively, you can delete this group. The creatures inside will be moved to another group. Which one?
		<select id="deletemove">
		<option value="0">Ungrouped</option>
					<option value="5">Grooo</option>
					<option value="8">Lalala</option>
					<option value="22">Kaaa</option>
					<option value="1">Raaa</option>
					<option value="87135">Soooo</option>
				</select>
    <button class='groupsend' data-whatdo='delete'>Disband</button>
	</p>
</div>

CSS

.groupbtn {padding:5px;margin:5px;background-color:white;border:2px solid grey;border-radius:5px;display:inline-table;}

.groupedit{display:none;width:410px;height:400px;background-color:white;border:2px solid grey;border-radius:10px;padding:10px;position:fixed;top:50%;left:50%;margin-top:-200px;margin-left:-200px;}

JavaScript

$('.groupbtn').click( function(){
var whatdo = $(this).data('whatdo');
var gid = $(this).data('gid');
var title = '';
if(whatdo == 'edit'){ title = 'Edit Group #'+gid; $('#delopt').show(); }
if(whatdo == 'create'){ title = 'Create New Group'; $('#delopt').hide(); }
$('#grouptitle').html(title);
$('.groupedit').fadeIn(300);

});

function deleteGroup(){
var group_id = $("#deleteGroup input#editGroupId").val();
var new_group_id = $("#deleteGroupSelect option:selected").val();
$.ajax({ url: public_dir+"/ajax-profile", data: { 'action' : 'deleteGroup', 'new_group_id' : new_group_id, 'group_id' : group_id }, type: 'POST', async: true, dataType: 'json',
success: function($response){
  if ($response.result == 'success'){
	if($("a[href='/pets/"+group_id+"/1']").parent().hasClass('currentGroup')){
		window.location = public_dir + "/pets/"+new_group_id+"/1";
	}else{
		$("a[href='/pets/"+group_id+"/1']").parent().remove();
		$("#deleteGroup").data('overlay').close();
	}
   }else{ $('#modal_error').html($response.error); }
}});
}	
	
function renameGroup(){
var group_id = $("#deleteGroup input#editGroupId").val();
var group_name = $("#groupName").val();
if(group_name.trim() != "") {
  $.ajax({ url: public_dir+"/ajax-profile", data: { 'action' : 'renameGroup', 'group_name' : group_name, 'group_id' : group_id }, type: 'POST', async: true, dataType: 'json',
  success: function($response){
	if ($response.result == 'success'){  $('.group_id_'+group_id+' a').html($response.name); $("#deleteGroup").data('overlay').close();
	}else{ $('#modal_error').html($response.error); }
  }});
}else{ $('#modal_error').html('Group title cannot be empty!'); }
}
	
	
	
function createNewGroup(){
if(jQuery("#createNewGroup input").val().trim() != "") {
  $.ajax({ url: public_dir+"/ajax-profile", data: { 'action' : 'createNewGroup', 'group_name' : jQuery("#createNewGroup input").val() }, type: 'POST', async: true, dataType: 'json',
  success: function($response){
	if ($response.result ==...