jQuery addClass example

Change class name on click in jQuery

by Pradeep K. Pant

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<table cellspacing="0" cellpadding="5" border="0">
<tr>
<td>
<select name="users" id="users" multiple size="10" style="min-width:40mm;width:auto;">
<option  title="User1" value="User1">User1</option>
<option  title="User2" value="User2">User2</option>
<option  title="User3" value="User3">User3</option>
<option  title="User4" value="User4">User4</option>
<option  title="User5" value="User5">User5</option>
</select>
   </td>
<td width="50">
	<input type='button' value=">>" id="groupAddBtn">
	<br><br>
	<input type='button' value="<<" id="groupRemoveBtn">
</td>
<td>

<select name="users_selected" id="users_selected" multiple size="10" style="min-width:40mm;width:auto;">			</select>
  </td>
  </tr>
</table>

JavaScript

jQuery(document).ready(function() {	
// Add group to selected groups
$('#groupAddBtn').click(function() { 
var options = $("select#users option:selected").clone();
if (options.length == 0) {
return alert("Please select one or more users to add");
}
var options_full_name = $("select#users_full_name option:selected").clone();
//debugger;

//Clone selected user list
var options_selected = $("select#users_selected").clone();
// We need to avoid duplicate for that we need list of already selected users and list of selected users which
// intent to add after clicking on add button
// we need to compare the entries from to be copied with selected user names and in case match found (already in selected list) then give a message that user is already selected .. also need to be fixed for multiple selection ..how we will give the message ..single or multiple?

// Initialize an array to hold the newly selected users and already selected users
var users_newly_selected = [];
var users_already_selected = [];

//Fetch full user list
var users_all = document.getElementById('users');
var len_users_already_selected = document.getElementById('users_selected').options.length;

// Loop through all the users and check for selected users on UI and store them in a array
for (var i = 0; i < users_all.length; i++) {
	if (users_all.options[i].selected) {
	//console.log("User all val",document.getElementById('users').options[i].attr('value'));
	users_newly_selected.push(users_all.options[i].text);	
	}	
}
// Loop through already selected user list and store them in an array
for (var i = 0; i < len_users_already_selected; i++) {
	var user_already_selected_text = document.getElementById('users_selected').options[i].text;			
	users_already_selected.push(user_already_selected_text);	
}
// Now make a logic to check if user in users_newly_selected in present in users_already_selected list. This is to ensure that we don't copy duplicate and do not copy to right side list if user is already...