We Keep Coding

i have a problem with JS function that doesn't change html class

I'm new with JS and html, So please go easy on me.
I made a registration form that contains multiple steps.
I have two button in two different form. next form button and back button. next button works perfectly and it changes html id base on what I needed. but the back button which is exactly like previous one doesn't work. Why?
I want that JS functions changes html class.
function backPageFunction() {
document.querySelector(".containerform1").id = 'containerform1';
document.querySelector(".containerform2").id = 'containerform2'
document.getElementById('progress-step1').style.width = '250px';
document.querySelector('.step-col2').style.fontSize = '15px';
document.querySelector('.step-col1').style.fontSize = '18px';
document.querySelector('.step-col1').style.color = '#f0eaea';
document.querySelector('.step-col2').style.color = '#546E7A';
};
function nextPageFunction() {
// containerform1.id='secActive1';
document.querySelector(".containerform1").id = 'secActive1';
document.querySelector(".containerform2").id = 'secActive2';
// containerform2.id='secActive2';
document.getElementById('progress-step1').style.width = '470px';
document.querySelector('.step-col1').style.fontSize = '15px';
document.querySelector('.step-col2').style.fontSize = '18px';
document.querySelector('.step-col2').style.color = '#f0eaea';
document.querySelector('.step-col1').style.color = '#546E7A';
};
#secActive1 {
width: 982px;
height: 600px;
position: relative;
margin: 40px auto;
border: 1px solid #cfd8dc;
background: #eceff1;
border-radius: 5px;
position: absolute;
opacity: 0 !important;
pointer-events: none;
transform: translateX(100%);
transition: 1s;
}
#secActive2 {
width: 982px;
height: 270px;
position: relative;
margin: 40px auto;
border: 1px solid #cfd8dc;
background: #eceff1;
border-radius: 5px;
position: absolute;
opacity: 1 !important;
transform: translateX(0%);
transition: 1s;
}
#containerform1 {
width: 982px;
height: 600px;
position: relative;
margin: 40px auto;
border: 1px solid #cfd8dc;
background: #eceff1;
border-radius: 5px;
position: absolute;
opacity: 1;
transition: 1s;
}
#containerform2 {
width: 982px;
height: 270px;
position: relative;
margin: 40px auto;
border: 1px solid #cfd8dc;
background: #eceff1;
border-radius: 5px;
position: absolute;
opacity: 0;
pointer-events: none;
transform: translateX(-100%);
transition: 1s;
}
<div class="next-btn-box">
<button class="nextbtnform1" id="nextbtnform1" onclick="nextPageFunction()">ثبت اطلاعات و ادامه </button>
</div>
</fieldset>
</form>
</div>
<div id="containerform2" class="containerform2">
<form id="Form2" class="Form2">
<fieldset id="Form2">
<legend class="form-title">مشخصات حرفه‌ای و شغلی</legend>
<div class="form_row three_column clearfix">
<div>
<label>سطح تحصیلات</label>
<span class="star">*</span>
<select id="edu" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty" name="edu" valid-directive="isEmpty">
<option label="دیپلم و پایینتر" value="number:100" selected="selected">دیپلم و پایینتر</option>
<option label="فوق دیپلم" value="number:101">فوق دیپلم</option>
<option label="کارشناسی" value="number:102">کارشناسی</option>
<option label="کارشناسی ارشد" value="number:103">کارشناسی ارشد</option>
<option label="دکتری و بالاتر" value="number:104">دکتری و بالاتر</option>
</select>
</div>
<div>
<label>رشته تحصیلی</label>
<span class="star">*</span>
<input id="degree">
</div>
<div>
<label>دانشگاه محل تحصیل</label>
<span class="star">*</span>
<input id="college" name="college" valid-directive="isEmpty,isPersianAlphaWithoutNumber,isInAlphabet([2#50])">
</div>
</div>
</fieldset>
<fieldset class="clearfix moshakhasat_canoon ng-scope">
<div class="next-btn-box">
<button class="backbtnform2" id="backbtnform2" onclick='backPageFunction()'>بازگشت و ویرایش اطلاعات</button>

Hi so I you want to change classes of elements try this:
1) Change id's to classes in css:
like .secActive1, .secActive2 etc.
2) JS:
function changeClasses(){
document.querySelector(".containerform1").classList.add('secActive1');
document.querySelector(".containerform1").classList.add('secActive2');
}
Don't forget to remove them when other button is clicked:
function changeClassesBack(){
document.querySelector(".containerform1").classList.remove('secActive1');
document.querySelector(".containerform1").classList.remove('secActive2');
}
Hope it helps

How to toggle a div from right to left in jquery

I have this fiddle where I am trying to create a floating div which should toggle from right to left .
I am very new to UI so my code is bit messy
here is my code and FIddle
$(".widget-toggle-btn").click(function() {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
//var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('.widget').toggle(effect, 'right', duration);
});
.widget {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 0px 4px 4px 4px;
padding: 1.0005rem;
-moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
float: right;
width: 87%;
}
.home-body aside {
padding: 1.3125rem 0;
padding-left: 1.3125rem;
padding-right: 1.3125rem;
float: left;
}
.find-out-more {
background: #16a085;
color: #fff;
}
.widget-toggle-btn {
width: 46px;
height: 84px;
float: left;
border-radius: 4px 1px 1px 4px;
padding-left: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="col-md-4">
<div id="popup-x">
<div class="widget-toggle-btn find-out-more ">
Click me to toggle him!
</div>
<div class="widget find-out-more ">
<form action="" name="learn-more" id="learn-more" method="POST">
<h5 id="head-element" name="head-element">For Admissions, Enroll Now!</h5>
<input type="email" name="emailId" id="emailId2" placeholder="Email address">
<div id="emailError2" style="margin-top:-15px;font-size:12px;display:none"></div>
<input type="text" id="name2" name="name" placeholder="Full Name" title="Full Name">
<div id="nameError2" style="margin-top:-15px;font-size:12px;display:none"></div>
<input type="tel" id="phoneNumber2" name="phoneNumber" placeholder="Phone Number" maxlength="13" onkeypress="return isNumberKey(event)">
<div id="phoneError2" style="margin-top:-15px;font-size:12px;display:none"></div>
<div id="image-load"></div>
<input id="courseSelection" name="courseSelection" title="Course" type="hidden" value="" />
<input id='redirectionUrl' type='text' style='display:none;' name='redirectionUrl' value='/' />
<input type='hidden' style='display:none;' name='leadGroup' value='pondi' />
<input type="submit" class="button" onclick="return validatePhone()" value="SUBMIT" />
</form>
<p class="disclaimer-popup">*Please note that by filling the form, you are agreeing to our terms & conditions in the disclaimer section.</p>
</div>
</div>
<br>
</aside>
So if you click on that toggle button I am getting error that n.easing[this.easing] is not a function
Can any one help me fix this thanks

you can use float values in jquery.
$(".widget-toggle-btn").click(function() {
alert('ss');
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
//var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
/* $('.widget').animate({
width: 'toggle'
}, 400);*/
$('.widget').css('float','left');
$('.widget-toggle-btn').css('float','right');
});
Here is your update code. https://jsfiddle.net/KFmLv/6753/

You can do it like this also. refer the working demo
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
div.mydiv{
width: 0px;
height: 100px;
position: absolute;
left: 70px;
top: 20px;
background-color: orange;
overflow: hidden;
text-align: center;
color: white;
}
#mybutton{
width: 70px;
height: 100px;
color: white;
position: absolute;
top:20px;
left:0px;
background-color: black;
color: orange;
}
</style>
<body>
<div class="mydiv">Hello StackOverflow ......</div>
<button id="mybutton">Click on me</button>
<script type="text/javascript">
var theNum = 0;
$("#mybutton").click(function(){
theNum = theNum +1;
if(theNum%2 != 0)
{
$("div.mydiv").animate({width:500},1000);
}
else
{
$("div.mydiv").animate({width:0},1000);
}
});
</script>
</body>
</html>
NOTE : This answer is for your request. refer the below working demo.click on the button to see. hope this will help to you. change the positions and sizes as your need.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
div.holder{
width: 400px;
height: 600px;
position: absolute;
right: 0;
}
div.holder div.formholder{
width: 0px;
height: 600px;
background-color: orange;
position: absolute;
right: 0;
}
#mybutton{
width: 50px;
height: auto;
position: absolute;
right: 0px;
}
</style>
<body>
<div class="holder">
<div class="formholder"></div>
<button id="mybutton">C<br>L<br>I<br>C<br>K<br><br> O<br>N<br> <br>M<br>E</button>
</div>
<script type="text/javascript">
var my_val = 0;
$("#mybutton").click(function(){
my_val = my_val+1;
if (my_val%2 != 0)
{
$("div.formholder").animate({width:300},1000);
$("#mybutton").animate({right:300},1000);
}
else
{
$("div.formholder").animate({width:0},1000);
$("#mybutton").animate({right:0},1000);
}
});
</script>
</body>
</html>

You need to download the jquery ui plugin. all the effects are binding in a single file.
Link for Jquery UI Effects

Sorry I can't add a comment, but the button is fixed because it does not have class .widget

you missed the jQuery ui library.
And in your https://jsfiddle.net/KFmLv/6752/ fiddle you called multiple time jquery, jquery ui library.
$(".widget-toggle-btn").click(function() {
alert('ss');
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
//var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
/* $('.widget').animate({
width: 'toggle'
}, 400);*/
$('.widget').toggle(effect,'left', duration);
});
.widget {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 0px 4px 4px 4px;
padding: 1.0005rem;
-moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
float: right;
width: 87%;
}
.home-body aside {
padding: 1.3125rem 0;
padding-left: 1.3125rem;
padding-right: 1.3125rem;
float: left;
}
.find-out-more {
background: #16a085;
color: #fff;
}
.widget-toggle-btn {
width: 46px;
height: 84px;
float: left;
border-radius: 4px 1px 1px 4px;
padding-left: 4px;
margin-left: 19px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<aside class="col-md-4">
<div id="popup-x">
<div class="widget-toggle-btn find-out-more ">
Click me to toggle him!
</div>
<div class="widget find-out-more ">
<form action="" name="learn-more" id="learn-more" method="POST">
<h5 id="head-element" name="head-element">For Admissions, Enroll Now!</h5>
<input type="email" name="emailId" id="emailId2" placeholder="Email address">
<div id="emailError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<input type="text" id="name2" name="name" placeholder="Full Name" title="Full Name">
<div id="nameError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<input type="tel" id="phoneNumber2" name="phoneNumber" placeholder="Phone Number" maxlength="13" onkeypress="return isNumberKey(event)">
<div id="phoneError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<div id="image-load"></div>
<input id="courseSelection" name="courseSelection" title="Course" type="hidden" value="" />
<input id='redirectionUrl' type='text' style='display:none;' name='redirectionUrl' value='/' />
<input type='hidden' style='display:none;' name='leadGroup' value='pondi' />
<input type="submit" class="button" onclick="return validatePhone()" value="SUBMIT" />
</form>
<p class="disclaimer-popup">*Please note that by filling the form, you are agreeing to our terms & conditions in the disclaimer section.</p>
</div>
</div>
<br>
</aside>
Updated
$(".widget-toggle-btn").click(function() {
var effect = 'slide';
var options = { direction: 'right' };
var duration = 500;
$('.widget').toggle(effect, options, duration);
});
.widget {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 0px 4px 4px 4px;
padding: 1.0005rem;
-moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
float: right;
width: 87%;
display: none;
}
.home-body aside {
padding: 1.3125rem 0;
padding-left: 1.3125rem;
padding-right: 1.3125rem;
float: left;
}
.find-out-more {
background: #16a085;
color: #fff;
}
.widget-toggle-btn {
width: 46px;
height: 84px;
float: left;
border-radius: 4px 1px 1px 4px;
padding-left: 4px;
margin-left: 19px;
}
#popup-x{
position: absolute;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<aside class="col-md-4">
<div id="popup-x">
<div class="widget-toggle-btn find-out-more ">
Click me to toggle him!
</div>
<div class="widget find-out-more ">
<form action="" name="learn-more" id="learn-more" method="POST">
<h5 id="head-element" name="head-element">For Admissions, Enroll Now!</h5>
<input type="email" name="emailId" id="emailId2" placeholder="Email address">
<div id="emailError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<input type="text" id="name2" name="name" placeholder="Full Name" title="Full Name">
<div id="nameError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<input type="tel" id="phoneNumber2" name="phoneNumber" placeholder="Phone Number" maxlength="13" onkeypress="return isNumberKey(event)">
<div id="phoneError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
<div id="image-load"></div>
<input id="courseSelection" name="courseSelection" title="Course" type="hidden" value="" />
<input id='redirectionUrl' type='text' style='display:none;' name='redirectionUrl' value='/' />
<input type='hidden' style='display:none;' name='leadGroup' value='pondi' />
<input type="submit" class="button" onclick="return validatePhone()" value="SUBMIT" />
</form>
<p class="disclaimer-popup">*Please note that by filling the form, you are agreeing to our terms & conditions in the disclaimer section.</p>
</div>
</div>
<br>
</aside>

You don't need jQuery for this effect. Doing it with css transforms is more performant.
const button = document.querySelector('button')
const box = document.querySelector('.box')
button.addEventListener('click', function() {
box.classList.toggle('show')
})
body {
background-color: mediumseagreen;
}
button {
border: 1px solid #fff;
border-radius: 3px;
background: none;
padding: 5px;
margin: 5px;
}
.box {
display: inline-block;
padding: 10px;
margin: 5px;
background-color: seagreen;
transform: scaleX(0);
transform-origin: left;
transition: transform 500ms ease-in-out;
}
.show {
transform: scaleX(1);
}
<button>Toggle</button>
<div class="box">
I'm just a simple box!
</div>

You have an error in this row:
$('.widget').toggle(effect,'left', duration);
effect and duration are the property names.. you can't just copy it and hope that it's gonna work.
if you want to fix it, change it to:
$('.widget').toggle('left');
but if you want to study, read some jQuery tutorial
this one for example: http://www.w3schools.com/jquery/

Html/Javascript/Css how to check if inputs are empty [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have 6 different input-fields and I want to do so you have to fill in all of them, else a alert message will pop-up. Any tips on how to do this?
I also have problems with option for different font-styles. When you click on the different options for the font-style, the text that you wrote in the input-filed should change and also the text infront "förtag" and so on.
This is my code:
function SkrivUt() {
var el = document.getElementById('f');
el.style.color = document.getElementById('textColor').value;
el.style.fontStyle = document.getElementById('selectedFont').value;
el.style.backgroundColor = document.getElementById('backGroundColour').value;
$("#area1").html($("#foretagText").val());
$("#area2").html($("#efternamnText").val());
$("#area3").html($("#fornamnNamnText").val());
$("#area4").html($("#titleText").val());
$("#area5").html($("#telefonText").val());
$("#area6").html($("#epostText").val());
$("#visitkort").hide();
$("#visitkortsDemo").show();
}
function reset() {
document.getElementById('foretagText').value = "";
document.getElementById('efternamnText').value = "";
document.getElementById('fornamnNamnText').value = "";
document.getElementById('titleText').value = "";
document.getElementById('telefonText').value = "";
document.getElementById('epostText').value = "";
}
.form-style-3 {
max-width: 400px;
max-height 400px;
font-family: "Comic Sans MS", cursive, sans-serif;
}
.form-style-3 label {
display: block;
margin-bottom: 10px;
}
.form-style-3 label span {
float: left;
width: 150px;
font-weight: bold;
font-size: 13px;
text-shadow: 1px 1px 1px #fff;
}
.form-style-3 fieldset {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
margin: 0px 0px 10px 0px;
border: 1px solid #FFD2D2;
padding: 20px;
background: lightblue;
box-shadow: inset 0px 0px 15px #FFE5E5;
-moz-box-shadow: inset 0px 0px 15px #FFE5E5;
-webkit-box-shadow: inset 0px 0px 15px #FFE5E5;
}
/*Format legent inom ett fieldset*/
.form-style-3 fieldset legend {
color: #FFA0C9;
border-top: 1px solid #FFD2D2;
border-left: 1px solid #FFD2D2;
border-right: 1px solid #FFD2D2;
border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
background: #FFF4F4;
padding: 0px 8px 3px 8px;
box-shadow: -0px -1px 2px #F1F1F1;
-moz-box-shadow: -0px -1px 2px #F1F1F1;
-webkit-box-shadow: -0px -1px 2px #F1F1F1;
font-weight: normal;
font-size: 12px;
}
.select-field {
background: gray;
color: white;
border-radius: 5px 5px 5px 5px;
}
.input-field {
font-family: "Comic Sans MS", cursive, sans-serif;
color: red
}
<!DOCTYPE html>
<html>
<head>
<title>Visitkort</title>
<link rel='stylesheet' type='text/css' href='Style.css' />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="form-style-3">
<div id="visitkort" style='display:block'>
<fieldset>
<legend>Visitkort</legend>
<label><span>Företaget</span>
<input type="text" id="foretagText" />
</label>
<label><span>Efternamn </span>
<input type="text" id="efternamnText" />
</label>
<label><span>Förnamn </span>
<input type="text" id="fornamnNamnText" />
</label>
<label><span>Titel </span>
<input type="text" id="titleText" />
</label>
<label><span>Telefon </span>
<input type="text" id="telefonText" />
</label>
<label><span>Epost </span>
<input type="text" id="epostText" />
</label>
<label>
<span>Välj bakgrundsfärg</span>
<select class="select-field" id="backGroundColour">
<option value="RoyalBlue">Blå</option>
<option value="Yellow">gul</option>
<option value="Crimson">Röd</option>
</select>
</label>
<label>
<span>Välj Textfärg</span>
<select class="select-field" id="textColor">
<option value="RoyalBlue">Blå</option>
<option value="Yellow">Gul</option>
<option value="Crimson">röd</option>
</select>
</label>
<label>
<span>Välj typsnitt</span>
<select class="select-field" id="selectedFont">
<option value="Verdana">Verdana</option>
<option value="Ariel">Ariel</option>
<option value="Impact">Impact</option>
<option value="Tahoma">Tahoma</option>
</select>
</label>
<label><span><button type="button" onclick="reset()">Nollställ</button></span><span><button type="button" onclick="SkrivUt()">Skriv ut</button></span>
</label>
</fieldset>
</div>
<div id="visitkortsDemo" style='display:none'>
<fieldset id="f">
<legend>Förgranskning av visitkort</legend>
n>Företaget </span>
<p id="area1"></p>
</label>
<label><span>Efternamn </span>
<p id="area2"></p>
</label>
<label><span>Förnamn </span>
<p id="area3"></p>
</label>
<label><span>Titel </span>
<p id="area4"></p>
</label>
<label><span>Telefon </span>
<p id="area5"></p>
</label>
<label><span>Epost </span>
<p id="area6"></p>
</label>
</fieldset>
</div>
</div>
</body>
</html>

A simple and quick way would be to use HTML5's required attribute!
Example:
<input type="text" id="foretagText" required />
This will produce browser alerts, when an input field is empty. No need for difficult custom Javascript.

You haven't tried much, so im not just going to give answer, but here is an idea, in raw javascript. You will want a better way of collecting the input Ids obviously, thats up to you.
<script>
var inputs = ["inputid1", "inputid2", "inputid3"];
var notFilled = "";
for (var i in inputs){
element = document.getElementById(i);
if(element.value==""){
notFilled = i;
break;
}
}
if(notFilled!=""){
alert("you must fill" + notFilled);
}
</script>

// create your err array
var err = [];
//test if values are a blank string
if($("#foretagText").val() === ""){
//add the error message to your error array
err.push("Foretag not entered");
}
// be sure you only have if statements and they aren't nested like this
if($("#idOfNextValue").val() === ""){
//add the error message to your error array
err.push("Foretag not entered");
}
//alert all messages in your error array.
alert (err.length + " Errors:<br>" +err.join("<br>"));//join

In HTML5 you can use required attribute as follow;
<input type="text" required>
Or in jQuery:
Let's say HTML:
<input type="text" id="input-1">
<input type="text" id="input-2">
<input type="text" id="input-3">
<input type="text" id="input-4">
and so on..
Now jQuery
if($("[id^=input]").val()=="")
{
alert("error");
return;
}

HTML way : Use required attribute
<input type="text" id="somename" required>
Javascript way:
if ($('#foretagText').val() == '' || $('#efternamnText').val() != ' ...) {
alert("Fields empty");
}

For your first question. To require the user to select a value in a select you have to add the atributte required like this
<select class="select-field" id="backGroundColour" required>
<option value="RoyalBlue">Blå</option>
<option value="Yellow">gul</option>
<option value="Crimson">Röd</option>
</select></label>
For your second question I'm not completely sure about this but I think that the problem resides in that you are trying to change the label style directly without change the associated css.

Use a unique javaScript and CSS for multiple components

I have a styled-select dropdown menu, and I created it's own .css and .js.
This is what happens when I use only one dropdown menu in a page, which works fine as expected:
jsFiddle OK
Instead when I use two dropdown menu it's a mess, and it's normal, because my .js file will do it's functions to all those dropdown menu which exists on the page. This is how it appears when I use two dropdown menu with the same .js and .css files:
jsFiddle NOT OK
Now my questions is how can I use the same .js and .css files for multiple dropdown's which all of them act as expected?
$(function () {
$('.styled-select select').hide();
$("select#elem").val('2');
$('.styled-select div').html($('.styled-select select option:selected').text());
$('.styled-select div').click(function () {
$('.styled-select select').show();
$('.styled-select select').attr('size', 5);
$('.styled-select select').focus();
});
$('.styled-select select').click(function () {
$('.styled-select div').html($('.styled-select select option:selected').text());
$('.styled-select select').hide();
});
$('.styled-select select').focusout(function () {
$('.styled-select select').hide();
});
});
.styled-select select {
position: absolute;
background: transparent;
width: 420px;
padding-top: 5px;
font-size: 18px;
font-family: 'PT Sans', sans-serif;
color: black;
border: 0;
border-radius: 4;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
z-index: 1;
outline: none;
left: -7px;
}
.styled-select {
background: url('../img/campaignSelector.png') no-repeat right;
background-color: white;
width: 420px;
height: 42px;
position: relative;
margin: 0 auto;
box-shadow: 0 2px 2px 0 #C2C2C2;
background-position: 97% 50%;
}
.styled-select option {
font-size: 18px;
background-color: white;
margin-left: 3px;
}
::-webkit-scrollbar {
display: none;
}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div style="width:800px; height: 600px; background: grey;">
<div class="styled-select" style="left:-250px; top:90px; width:200px;">
<div style="font-size:18px; height:42px; position:relative; top:10px; left: 4px;"></div>
<select id="" name="" style="margin:0 0 0 5px; border: none;" onblur="this.size=0; width:200px;" onchange="this.size=0;">
<option value="0">Marco P</option>
<option value="1">Marco F</option>
<option value="2">Daniele</option>
<option value="3">Cristina</option>
<option value="4">Angine</option>
</select>
</div>
<div class="styled-select" style=" width:200px; left:50px; top:48px;">
<div style="font-size:18px; height:42px; position:relative; top:10px; left: 4px;"></div>
<select id="" name="" style="margin:0 0 0 5px; border: none;" onblur="this.size=0; width:200px;" onchange="this.size=0;">
<option value="0">ReshaD</option>
<option value="1">Rasheed</option>
<option value="2">Reza</option>
<option value="3">Davin</option>
<option value="4">Ariya</option>
</select>
</div>
</div>

To make your code work for multiple instances of the .styled-select container you need to use $(this) to reference the element which is raising the event and then use closest() to get the nearest parent .style-select. From there you can use find() to get the required element. Try this:
$('.styled-select select').hide();
$("select#elem").val('2');
$('.styled-select div').each(function() {
var $container = $(this).closest('.styled-select');
$(this).html($container.find('select option:selected').text());
});
$('.styled-select div').click(function() {
var $container = $(this).closest('.styled-select');
$container.find('select').show().attr('size', 5).focus();
});
$('.styled-select select').click(function() {
var $container = $(this).closest('.styled-select');
var text = $container.find('select option:selected').text();
$container.find('div').html(text);
$container.find('select').hide();
});
$('.styled-select select').focusout(function() {
var $container = $(this).closest('.styled-select');
$container.find('select').hide();
});
Updated fiddle

how to prevent appendTo method in jquery

I am facing one issue in my html code please check that out below in code:
HTML:
<div class="agent_select_wrap">
<select name="menu-114" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
<option value="Select Category" selected="selected">Select Agent Name</option>
<option>Mr. abc</option>
<option>Mr. abc</option>
<option>Mr. abc</option>
</select>
</div>
<div class="agent_select_wrap02">
<div class="my_textarea"></div>
<button>Send</button>
</div>
CSS
.agent_select_wrap { width: 40%; margin: 30px auto 10px auto;}
.agent_select_wrap02 { width: 40%; margin: 0px auto 50px auto;}
.agent_select_wrap select{font-weight:100; font-family: 'Open Sans', sans-serif; font-size: 13px; color: #494949; background: #fff url('../images/selectbox-arrow02.png') right center no-repeat; outline: 0; margin-bottom: 0px; margin: auto; width: 100%; height: 40px; border: 1px solid #ccc; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; -ms-appearance: none; /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);*/}
.agent_select_wrap select option { background: #fff; color: #000;}
.my_textarea textarea {font-weight:100; font-family: 'Open Sans', sans-serif; font-size: 13px; color: #494949; width:97.4%; display:block; height: 100px; border: 1px solid #ccc; padding: 6px 0 0 6px; margin: 0; border-radius: 0px; /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);*/}
.my_textarea p{padding: 0; margin: 0; text-align: center; font-size: 12px;font-family: 'Open Sans', sans-serif;}
.agent_select_wrap02 button { display: block; margin: 16px auto 0 auto; padding: 7px 30px; background: #494949; color: #fff; font-weight: 100; font-family: 'Open Sans', sans-serif; font-size: 18px; border: 0;}
.agent_select_wrap02 button:hover {cursor:pointer;}
JS
$(document).on('change', 'select[name=menu-114]', function () {
$("<textarea> Hello Mr. </textarea>").appendTo(".my_textarea")
$("<p>Please enter your message here..!</p>").appendTo(".my_textarea")
$(function () {
$('select').change(function () {
$that = $(this);
$('textarea').val(function () {
return $(this).prop('defaultValue') + ' ' + $that.val();
});
});
});
});
here is my working example
https://jsfiddle.net/7j623eho/

you just need to change one line of code in javascript code.
$(".my_textarea").html("<textarea> Hello Mr.</textarea><p>Please enter your message here..!</p>");
use above code Instead of yours ..
$("<textarea> Hello Mr. </textarea>").appendTo(".my_textarea")
$("<p>Please enter your message here..!</p>").appendTo(".my_textarea")

Probably your problem is that you don't remove just created textarea. Try to create it in <div id='temp'> element and then remove this element just before you create new one.
$('#temp').remove();
var container = $('<div id="temp">');
$("<textarea> Hello Mr. </textarea>").appendTo(container);
$("<p>Please enter your message here..!</p>").appendTo(container);
container.appendTo(".my_textarea");

I believe what you want is to create the textarea only once, and let the inline handler to handle further change, so the better way to achieve it is
var onMenuSelected = function () {
$("<textarea> Hello Mr. </textarea>").appendTo(".my_textarea")
$("<p>Please enter your message here..!</p>").appendTo(".my_textarea")
$(function () {
$('select').change(function () {
$that = $(this);
console.log('Select');
$('textarea').val(function () {
return $(this).prop('defaultValue') + ' ' + $that.val();
});
});
});
// Just unbind self
$(document).off('change', 'select[name=menu-114]', onMenuSelected);
}
$(document).on('change', 'select[name=menu-114]', onMenuSelected);
By define the function, you can directly remove the $(document).on without remove other possible exist handlers. And the select event will only be registered once.
jsFiddle here.

Here we go, use the following code:
HTML
<div class="agent_select_wrap">
<select name="menu-114" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
<option value="Select Category" selected="selected">Select Agent Name</option>
<option>Mr. abc</option>
<option>Mr. abc</option>
<option>Mr. abc</option>
</select>
</div>
<div class="agent_select_wrap02">
<div id="my_textarea0">
</div>
<textarea id="my_textarea">
</textarea>
<button>Send</button>
</div>
JS
$(document).on('change', 'select[name=menu-114]', function () {
$("#my_textarea0").html("<textarea> Hello Mr. </textarea>")
$("#my_textarea").html("<p>Please enter your message here..!</p>")
$(function () {
$('select').change(function () {
$that = $(this);
$('textarea').val(function () {
return $(this).prop('defaultValue') + ' ' + $that.val();
});
});
});
});