I have this chat box and this go_to_top icon. Is that possible to hide the icon when the box is clicked and open, and display it again when its closed?
This is how it looks in my local host (view extern):
This my ChatBox code
<section class="btn-xs bd-section-5 hidden-xs bd-page-width bd-tagstyles" id="section5" data-section-title="Section">
<div class="bd-container-inner bd-margins clearfix">
<div class=" bd-layoutbox-9 bd-page-width bd-no-margins clearfix">
<div type="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="chatbutton bd-container-inner btn btn-default">
<h4 class=" bd-textblock-11 bd-content-element">
<span style="font-weight: normal;">Call us on</span> 0800 0125 888
</h4>
</div>
<div class="panel-collapse collapse" id="collapseOne">
<div class="panel-body">
<ul class="chat">
<li class="left clearfix"><span class="chat-img pull-left">
<img src="./assets/images/<?php echo ($cruise_avatar[0]); ?>.png" alt="<?php echo ($cruise_avatar[0]); ?>" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font"><?php echo ($cruise_avatar[1]); ?></strong> <small class="pull-right text-muted">
<span class="glyphicon glyphicon-time"></span><?php echo date("h:i:s A"); ?></small>
</div>
<p>
<?php echo ($cruise_avatar[2]); ?>
</p>
</div>
</li>
<li class="right clearfix"><span class="chat-img pull-right">
<img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<small class=" text-muted"><span class="glyphicon glyphicon-time"></span><?php echo date("h:i:s A"); ?></small>
<strong class="pull-right primary-font">Bhaumik Patel</strong>
</div>
<p>
<?php echo ($cruise_avatar[2]); ?>
</p>
</div>
</li>
</ul>
</div>
<div class="panel-footer">
<div class="input-group">
<input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />
<span class="input-group-btn">
<button class="btn btn-warning btn-sm" id="btn-chat">
Send</button>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
And that's it looks like this when clicked (view extern):
I tried to hide it with jQuery like this: UPDATE it to
<script>
$(document).ready(function(){
$(".bd-layoutbox-9").click(function(){
if ($("span.bd-icon-67.bd-icon").css("display","inline-block")){
$("span.bd-icon-67.bd-icon").css("display","none");
}
else if ($("span.bd-icon-67.bd-icon").css("display","none")){
$("span.bd-icon-67.bd-icon").css("display","inline-block");
}
});
});
</script>
and my span code
<div data-smooth-scroll data-animation-time="250" class=" bd-smoothscroll-3">
<span class="bd-icon-67 bd-icon "></span>
</div>
I can hide it when Chatbox is open, but when i close it is not displayed again.
Related
I am unable to make the trash icon visible more than one when I checked the checkbox element.
The first card only shows the trash icon, and the rest of the cards are not showing.
I have tried getElementById, querySelectorAll and getElementsByClassName. Nothing works properly as expected.
Can you find the logic error in the code?
function check() {
if (document.querySelector(".check").checked == true) {
document.querySelector(".deleteButton").style.visibility = "visible";
} else {
document.querySelector(".deleteButton").style.visibility = "hidden";
}
}
.deleteButton {
visibility: hidden;
}
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<a onclick="check()">
<input type="checkbox" class="check">
</a>
</div>
<h4 class="card-title">
Description 1
<a class="btn btn-outline-info deleteButton" href="/delete-todo/?id1">
<i class="fas fa-trash-alt" disabled="disabled"></i>
</a>
</h4>
</div>
</div>
<br>
</div>
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<a onclick="check()">
<input type="checkbox" class="check">
</a>
</div>
<h4 class="card-title">
Description 2
<a class="btn btn-outline-info deleteButton" href="/delete-todo/?id2">
<i class="fas fa-trash-alt" disabled="disabled"></i>
</a>
</h4>
</div>
</div>
<br>
</div>
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<a onclick="check()">
<input type="checkbox" class="check">
</a>
</div>
<h4 class="card-title">
Description 3
<a class="btn btn-outline-info deleteButton" href="/delete-todo/?id3">
<i class="fas fa-trash-alt" disabled="disabled"></i>
</a>
</h4>
</div>
</div>
<br>
</div>
Don't wrap a checkbox in a link
Also delegate
I delegate from a div I called container. It needs to be the nearest common container for your cards
document.getElementById("container").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("check")) {
tgt.closest(".card-body").querySelector(".deleteButton").classList.toggle("hide", !tgt.checked)
}
else if (tgt.closest("a").classList.contains("deleteButton")) {
e.preventDefault();
tgt.closest(".card").remove()
}
})
.hide {
display: none
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<div id="container">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<input type="checkbox" class="check">
</div>
<h4 class="card-title">
Description 1
<a class="btn btn-outline-info deleteButton hide" href="/delete-todo/?id1">
<i class="fas fa-trash-alt" disabled="disabled">Delete</i>
</a>
</h4>
</div>
</div>
<br>
</div>
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<input type="checkbox" class="check">
</div>
<h4 class="card-title">
Description 2
<a class="btn btn-outline-info deleteButton hide" href="/delete-todo/?id2">
<i class="fas fa-trash-alt" disabled="disabled">Delete</i>
</a>
</h4>
</div>
</div>
<br>
</div>
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<input type="checkbox" class="check">
</div>
<h4 class="card-title">
Description 3
<a class="btn btn-outline-info deleteButton hide" href="/delete-todo/?id3">
<i class="fas fa-trash-alt" disabled="disabled">Delete</i>
</a>
</h4>
</div>
</div>
<br>
</div>
</div>
Here i want to append the div to the parent div using closest function.Here is my code please have a look
var maxAppends = 0;
function add_field(id)
{
var update_new = $('<div class="form-group" style="margin-bottom: 0px">\n\
<label for="field-1" class="col-sm-4 control-label">Documentsss</label>\n\
<div class="col-sm-5">\n\
<div class="fileinput fileinput-new" data-provides="fileinput">\n\
<span class="btn btn-default btn-file"><span class="fileinput-new" >Select file</span><span class="fileinput-exists" >Change</span><input type="file" name="files[]" ></span> <span class="fileinput-filename"></span>×</div></div>\n\<div class="col-sm-2">\n\<strong>\n\
<i class="fa fa-times"></i> Remove</strong></div>');
$(".update_new_"+id).append(update_new);
maxAppends++;
}
<div id="update_new_<?php echo $value->id;?>" class="update_new_<?php echo $value->id;?> item-row">
<div class="form-group mb0" style="margin-bottom: 0px">
<label for="field-1"
class="col-sm-4 control-label">Other Document</label>
<div class="col-sm-5">
<div class="fileinput fileinput-new" data-provides="fileinput">
<?php
if (!empty($value->documents)) {
$uploaded_file = json_decode($value->documents);
}
if (!empty($uploaded_file)):foreach ($uploaded_file as $v_files_image): ?>
<div class="">
<input type="hidden" name="fileName[]"
value="<?php echo $v_files_image ?>">
<span class=" btn btn-default btn-file">
<span class="fileinput-filename"> <?php echo $v_files_image ?></span>
×
</span>
<strong>
<a href="javascript:void(0);" class="RCF"><i
class="fa fa-times"></i> Remove</a></strong>
<p></p>
</div>
<?php endforeach; ?>
<?php else: ?>
<span class="btn btn-default btn-file"><span
class="fileinput-new">Select File</span>
<span class="fileinput-exists"><?= lang('change') ?></span>
<input type="file" name="files[]">
</span>
<span class="fileinput-filename"></span>
<a href="#" class="close fileinput-exists" data-dismiss="fileinput"
style="float: none;">×</a>
<?php endif; ?>
</div>
<div id="msg_pdf" style="color: #e11221"></div>
</div>
<div class="col-sm-3">
<strong><a href="javascript:void(0);" id="update_more" onclick="add_field('<?php echo $value->id;?>');" u_id="<?php echo $value->id;?>" class="addCF item-row-click update_more_<?php echo $value->id;?>"><i
class="fa fa-plus"></i> Add More
</a></strong>
</div>
</div>
</div>
when i click add_field i want a div to append to the parent div with class update_new_<?php echo $value->id;?>,so in order to that i had done a script.please have a look
without using closest function the div is appending but the values of div is not passing the value through post,so i want to do the append function with closest function,please help me to solve
i have a software which passed a unique id to the url of my clients but limitation of my software is that is passes the unique id in the end of the url and sometimes link are too long and we want to pass id inbetween the url like www.zyx.com?id=i want to pass id here in between &jsabdkhbdf&sdkjbahdb&kjdsbkfbskdb&pid=jdndhf
i have seeen a software where is you to pass id in between you type like this ?id=[%id%] where every in url i type this parameter will pass there idk how its hapenning there pls help pasting the code
<?php require_once("session.php" );?>
<?php include("header.php"); require_once("dbcon.php");?>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Dashboard<br>
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i> Survey<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
New Survey
Add Clients
Clients List
</li>
<li>
Survey List
</li>
</ul>
<!-- /.nav-second-level -->
</li><br>
<li>
<i class="fa fa-table fa-fw"></i>Add Vendor
Vendor List
</li>
<li>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
<nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-8 ">
<h1 class="page-header">Dashboard</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-check-circle fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<?php
$sql = "SELECT COUNT(status) as count from new_survey WHERE Status LIKE 'open%'";
$result = $conn->query($sql);
while($rows = $result->fetch_assoc() )
echo "<div class='huge'>{$rows['count']}</div>";
?>
<div>Surveys Completed</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-green">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-tasks fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">New</div>
<div>Survey</div>
</div>
</div>
</div>
<a href="new_survey.php">
<div class="panel-footer">
<span class="pull-left">Create New Survey</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-yellow">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-ban fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<?php
$sql = "SELECT COUNT(status) as count from new_survey WHERE Status LIKE 'close%'";
$result = $conn->query($sql);
while($rows = $result->fetch_assoc() )
echo "<div class='huge'>{$rows['count']}</div>";
?>
<div>InCompleted Surveys</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-red">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-support fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<?php
$sql = "SELECT COUNT(status) as count from new_survey WHERE Status LIKE 'invoice%'";
$result = $conn->query($sql);
while($rows = $result->fetch_assoc() )
echo "<div class='huge'>{$rows['count']}</div>";
?>
<div>Invoiced Surveys</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Survey List
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" width="100%" border="1">
<thead><tr>
<th>Survey ID</th>
<th>Client Name</th>
<th>Survey Name</th>
<th>Client Live URL</th>
<th>Client Test URL</th>
<th>Completed</th>
<th>InCompleted</th>
<th>Quota Full</th>
<th>Time Period</th>
<th>Creation Date</th>
<th>End Date</th>
<th>Status</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php
**this is unique parameter**
**$a = bin2hex(random_bytes(10));**
$sql = "SELECT * from new_survey where survey_id order by survey_id desc";
$result = $conn->query($sql);
while($rows = $result->fetch_assoc() ){
echo "<tr>";
echo " <td>{$rows['survey_id']}</td>";
echo " <td>{$rows['client_name']}</td>";
echo "<td>{$rows['survey_name']}</td>";
here it is passing when fetching the url from database onclick of link
**echo "<td> <a href=". $rows['client_live_url'] . urlencode($a) . "&s_id=" . $rows['survey_id'] . " target='_blank'> Click Here </a></td>";**
echo "<td> Click Here </td>";
echo" <td>{$rows['completed']}</td>";
echo "<td>{$rows['incompleted']}</td>";
echo "<td>{$rows['quota_full']}</td>";
echo" <td>{$rows['time_period']}</td>";
echo" <td>{$rows['creation_date']}</td>";
echo" <td>{$rows['end_date']}</td>";
echo" <td>{$rows['status']}</td>";
echo" <td><a href=\"edit_survey.php?id={$rows['survey_id']}\">Edit</td>";
echo "</tr>";
}
$conn->close();
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- /#page-wrapper -->
<div class="panel-footer">
<div class="text-center">
<?php echo date('Y'); ?>, ©
<?php echo "$copyright"; ?>
</div>
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="./vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="./vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="./vendor/metisMenu/metisMenu.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="./vendor/raphael/raphael.min.js"></script>
<script src="./vendor/morrisjs/morris.min.js"></script>
<script src="./data/morris-data.js"></script>
<!-- Custom Theme JavaScript -->
<script src="./dist/js/sb-admin-2.js"></script>
I've made a profile page on which user's posts are displayed, user can perform function delete or edit post.But,
when i click on edit post on any of my post ,only content of first post is fetched in the modal.
my js code:
$('.dropdown-menu').find('.edit').on('click', function(e) {
e.preventDefault();
var postbody = $('#fetch').find('p').text();
$('#post-body').val(postbody);
$('#edit-modal').modal();
});
my view code:
#foreach($posts as $post) #if(Auth::user()== $post->user)
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<section class="col-md-2 col-xs-2">
<img id="imagesize2" src="images/g.jpg" class="img-circle" data- action="zoom" />
</section>
<section class="col-md-5 col-xs-offset-1 col-xs-5">
<a id="alink13" href=""><h5 id="alink14">{{$post->user->firstname}}</h5> </a>
<p>on {{$post->created_at}}</p>
</section>
<section class="col-md-offset-3 col-md-2 col-xs-4 col-lg-offset-1">
<div class="btn-group">
<button id="btnclr4" type="button" class="btn btn-default dropdown- toggle" data-toggle="dropdown" aria-expanded="false"><span class="glyphicon glyphicon-chevron-down"></span>
</button>
#if(Auth::user()==$post->user)
<ul id="remove" class="dropdown-menu" role="menu">
<a id="remove2" href="{{route('post.delete',['post_id' => $post->id])}}">
<li role="presentation">Remove This Post</li>
</a>
<a href="" class="edit">
<li role="presentation">Edit This Post</li>
</a>
</ul>
#endif
</section>
</div>
</div>
<div class="panel-content">
<div class="row" id="fetch">
<section class="col-md-12">
<p>{{$post->body}}</p>
</section>
</div>
</div>
I have a list of employees generated dynamically from database, and each employee has got an id, now I want to open a div box on each click with respect to the id's and display their id's in that box.
I am not able to access that div with respect to the id selected.
include 'connect.php';
$ert=mysql_query("Select * from login_session where bit='0' and date='$date'") or die(mysql_error());
while($we=mysql_fetch_array($ert)){
$employee_id=$we['employee_id'];
?>
<li> <?php echo $we['name'];?></li>
<div class="popup-box chat-popup" id="employee_<?php echo $employee_id; ?>">
<div class="popup-head">
<div class="popup-head-left pull-left"><img src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" alt="iamgurdeeposahan"> Gurdeep Osahan
</div>
<div class="popup-head-right pull-right">
<div class="btn-group">
<button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">
<i class="glyphicon glyphicon-cog"></i> </button>
<ul role="menu" class="dropdown-menu pull-right">
<li>Media</li>
<li>Block</li>
<li>Clear Chat</li>
<li>Email Chat</li>
</ul>
</div>
<button data-widget="remove" class="removeClass chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i></button>
</div>
</div>
<div class="popup-messages">
<div class="direct-chat-messages">
<div class="chat-box-single-line">
<abbr class="timestamp">October 8th, 2015</abbr>
</div>
<!-- Message. Default to the left -->
<div class="direct-chat-msg doted-border">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-left">Osahan</span>
</div>
<!-- /.direct-chat-info -->
<img alt="message user image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img"><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Hey bro, how’s everything going ?
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-timestamp pull-right">3.36 PM</span>
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-img-reply-small pull-left">
</span>
<span class="direct-chat-reply-name">Singh</span>
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
<div class="chat-box-single-line">
<abbr class="timestamp">October 9th, 2015</abbr>
</div>
<!-- Message. Default to the left -->
<div class="direct-chat-msg doted-border">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-left">Osahan</span>
</div>
<!-- /.direct-chat-info -->
<img alt="iamgurdeeposahan" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img"><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Hey bro, how’s everything going ?
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-timestamp pull-right">3.36 PM</span>
</div>
<div class="direct-chat-info clearfix">
<img alt="iamgurdeeposahan" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img big-round">
<span class="direct-chat-reply-name">Singh</span>
</div>
<!-- /.direct-chat-text -->
</div>
</div>
</div>
<div class="popup-messages-footer">
<textarea id="status_message" placeholder="Type a message..." rows="10" cols="40" name="message"></textarea>
<div class="btn-footer">
<button class="bg_none"><i class="glyphicon glyphicon-film"></i> </button>
<button class="bg_none"><i class="glyphicon glyphicon-camera"></i> </button>
<button class="bg_none"><i class="glyphicon glyphicon-paperclip"></i> </button>
<button class="bg_none pull-right"><i class="glyphicon glyphicon-thumbs-up"></i> </button>
</div>
</div>
</div>
<script>
$(function(){
$(".addClass").click(function () {
var var1=$(this).data('employee');
$('#employee_'+var1).addClass('popup-box-on');
});
$(".removeClass").click(function () {
var var1=$(this).data('employee');
$('#employee_'+var1).removeClass('popup-box-on');
});
})
</script>
Firstly , inside the anchor tag <a> with class .addClass , you are using $we['employee_id'] and then for it's respective box you are using $employee_id which is null and it results to an undefined variable error.
You should give the trigger and target selectors a unqiue identifiers , such as for .addClass you can use data attributes for appending the data to target something. look below:
<?php echo $we['name'];?>
and then for respective box id you can assign a unique id to it something like:
<div class="popup-box chat-popup" id="employee_<?php echo $employee_id; ?>">
and at the end inside javascript / jquery , you can trigger them with the data attribute value and by placing the unique identifier we have created for target div. let say .addClass's data attribute contains 34, which is a employee id , and .popup-box will have id="employee_34" as we need to identify them with something unique and not only numbers.
$(function(){
$(".addClass").click(function () {
var var1=$(this).data('employee');
$('#employee_'+var1).addClass('popup-box-on');
});
});
at the end you php and html code should look like this:
include 'connect.php';
$ert=mysql_query("Select * from login_session where bit='0' and date='$date'") or die(mysql_error());
while($we=mysql_fetch_array($ert)){
?>
<li> <?php echo $we['name'];?></li>
<div class="popup-box chat-popup" id="employee_<?php echo $employee_id; ?>">
<div class="popup-head">
<div class="popup-head-left pull-left"><img src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" alt="iamgurdeeposahan"> Gurdeep Osahan
</div>
<div class="popup-head-right pull-right">
<div class="btn-group">
<button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">
<i class="glyphicon glyphicon-cog"></i> </button>
<ul role="menu" class="dropdown-menu pull-right">
<li>Media</li>
<li>Block</li>
<li>Clear Chat</li>
<li>Email Chat</li>
</ul>
</div>
<button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i></button>
</div>
</div>
<div class="popup-messages">
<div class="direct-chat-messages">
<div class="chat-box-single-line">
<abbr class="timestamp">October 8th, 2015</abbr>
</div>
<!-- Message. Default to the left -->
<div class="direct-chat-msg doted-border">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-left">Osahan</span>
</div>
<!-- /.direct-chat-info -->
<img alt="message user image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img"><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Hey bro, how’s everything going ?
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-timestamp pull-right">3.36 PM</span>
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-img-reply-small pull-left">
</span>
<span class="direct-chat-reply-name">Singh</span>
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
<div class="chat-box-single-line">
<abbr class="timestamp">October 9th, 2015</abbr>
</div>
<!-- Message. Default to the left -->
<div class="direct-chat-msg doted-border">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-left">Osahan</span>
</div>
<!-- /.direct-chat-info -->
<img alt="iamgurdeeposahan" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img"><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Hey bro, how’s everything going ?
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-timestamp pull-right">3.36 PM</span>
</div>
<div class="direct-chat-info clearfix">
<img alt="iamgurdeeposahan" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img big-round">
<span class="direct-chat-reply-name">Singh</span>
</div>
<!-- /.direct-chat-text -->
</div>
</div>
</div>
<div class="popup-messages-footer">
<textarea id="status_message" placeholder="Type a message..." rows="10" cols="40" name="message"></textarea>
<div class="btn-footer">
<button class="bg_none"><i class="glyphicon glyphicon-film"></i> </button>
<button class="bg_none"><i class="glyphicon glyphicon-camera"></i> </button>
<button class="bg_none"><i class="glyphicon glyphicon-paperclip"></i> </button>
<button class="bg_none pull-right"><i class="glyphicon glyphicon-thumbs-up"></i> </button>
</div>
</div>
</div>
<?php } ?>
and your javascript code like below:
$(function(){
$(".addClass").click(function () {
var var1=$(this).data('employee');
$('#employee_'+var1).addClass('popup-box-on');
});
});
and do in this way same for removing the respective box for employee div.
Note
As the popup-box div's are multiple and are already inside the dom , you should not use id selector for remove trigger , as it will target only first div and not others , use an class for removing the div as well such as removeBox
Update for remove
For removing the div, don't use id for removing the div , change your remove button to the following:
<button data-widget="remove" data-employee="<?php echo $we['employee_id']; ?>" class="chat-header-button removeClass pull-right" type="button"><i class="glyphicon glyphicon-off "></i></button>
and use the below jquery code for removing the div
$(function(){
$(".removeClass").click(function () {
var var1=$(this).data('employee');
$('#employee_'+var1).removeClass('popup-box-on');
});
});