Develop Reference

My active/disable Functionality no longer works after cloning

I'm using the clone method to duplicate a form. I'm adding and removing the active
class on the buttons but, once I clone the form, the duplicate buttons no longer
function because they share the same class as the original. I want the buttons to still
function regardless how many times I clone it. I used jQuery and JavaScript, and I'm
still new to programming. Can you please give me some ideas as to how to solve this.
Thanks in advance fellow developers.
Here is my HTML Code:
<div class="column-bottom phone">
<p class="para_txt">Phone</p>
<div id="main-wrapper">
<div id="wrapper_1" class="parentClass">
<div class="basic_infor">
<p>Select the nature of phone:</p>
<div class="parent_btns">
<button class="func_btns btn_first_4 " >Private</button>
<button class="func_btns btn_second_4" >Work</button>
</div>
</div>
<div class="basic_infor">
<p>Select the type of phone:</p>
<div class="parent_btns">
<button class="func_btns btn_5">Mobile</button>
<button class="func_btns btn_6 ">Telephone</button>
<button class="func_btns btn_7 ">Fax</button>
<button class="func_btns btn_8">Extension</button>
</div>
</div>
<div class="txt_area">
<input type="textarea" placeholder="+27 85 223 5258">
<span onclick="delete_el();">x</span>
</div>
</div>
</div>
<div class="btn_add">
<button class="repl_btns phone_repl" onclick="duplicate();">Add additional</button>
<p>Display on foreman contact list?</p>
<input type="checkbox" id="input_field" name="Phone_contact">
</div>
</div>
Here is my jQuery and JavaScript Code. I selected the class for the first button and
added a active class to it while removing the active class for the second button. I did
the same for the rest of the buttons.
//private btn
$(".btn_first_4").click(function () {
$(this).addClass("is_active");
$(".btn_second_4").removeClass("is_active");
});
//work btn
$(".btn_second_4").click(function () {
$(this).addClass("is_active");
$(".btn_first_4").removeClass("is_active");
});
//Bottom 5 btns
$(".btn_5").click(function () {
$(this).addClass("is_active");
$(".btn_6,.btn_7,.btn_8").removeClass("is_active");
})
$(".btn_6").click(function () {
$(this).addClass("is_active");
$(".btn_5,.btn_7,.btn_8").removeClass("is_active");
})
$(".btn_7").click(function () {
$(this).addClass("is_active");
$(".btn_5,.btn_6,.btn_8").removeClass("is_active");
})
$(".btn_8").click(function () {
$(this).addClass("is_active");
$(".btn_5,.btn_6,.btn_7").removeClass("is_active");
})
/*
Cloning Functions....
I tried to set the id of my new clone to "wrapper_2", but it only works when i clone it
once. I wanted to change the class attribute this way but I realize it wont work as
well. Please advise. Thanks
*/
function duplicate(){
const wrapper = document.getElementById("wrapper_1");
const clone = wrapper.cloneNode(true);
clone.id = "wrapper_2";
const main_wrapper = document.getElementById("main-wrapper");
main_wrapper.appendChild(clone)
}
function delete_el() {
const del_el = document.getElementById("wrapper_2");
del_el.remove();
}

Problems
If you use .cloneNode() any event handlers bound to the original will not carry over to the clone. Fortunately you are using jQuery which has it's own method .clone(). It has the ability to clone and keep event handlers, $(selector).clone(true) to copy with events and $(selector).clone(true, true) for a deep copy with events.
Note: Using .clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. Where possible, it is recommended to avoid cloning elements with this attribute or using class attributes as identifiers instead.
.clone()|jQuery API Documentation
Do not clone anything with an id, in fact you are using jQuery so don't use id at all. Convert every id to a class, it might feel like a lot of work but in the long run you'll be thankful you did.
Do not use inline event handlers
<button onclick="lame(this)">DON'T DO THIS</button>
This is especially important if you use jQuery which makes event handling incredibly easy to write and very versatile.
let count = 0;
$('output').val(++count);
$('.remove').hide();
$('.select button').on('click', function() {
const $old = $(this).parent().find('.active');
if (!$old.is(this)) {
$old.removeClass('active');
}
$(this).toggleClass('active');
});
$('.clear').on('click', function() {
$(this).parent().find('input').val('');
});
$('.remove').on('click', function() {
$(this).closest('.fields').remove();
let out = $.makeArray($('output'));
count = out.reduce((sum, cur, idx) => {
cur.value = idx + 1;
sum = idx + 1;
return sum;
}, 0);
});
$('.add').on('click', function() {
const $first = $('.fields').first();
const $copy = $first.clone(true, true);
$copy.insertAfter($('.fields').last());
$copy.find('output').val(++count);
$copy.find('.remove').show();
$copy.find('input').val('');
});
html {
font: 300 2ch/1.2 'Segoe UI'
}
fieldset {
min-width: fit-content
}
.fields {
margin-top: 1rem;
}
output {
font-weight: 900;
}
menu {
display: flex;
align-items: center;
margin: 0.5rem 0 0.25rem;
}
button,
input {
display: inline-block;
font: inherit;
font-size: 100%;
}
button {
cursor: pointer;
border: 1.5px ridge lightgrey;
}
.numbers {
display: flex;
align-items: center;
margin: 1rem 0 0.5rem -40px;
}
.clear {
border: 0;
font-size: 1.25rem;
line-height: 1.25;
}
.right {
justify-content: flex-end;
}
.left {
padding-left: 0;
}
.number-3 {
width: 9rem;
}
.number-1 {
width: 3rem;
}
[class^="number-"] {
font-family: Consolas
}
.clear {
border: 0;
background: transparent;
}
label+label {
margin-left: 6px;
}
button:first-of-type {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
button:nth-of-type(2) {
border-radius: 0;
}
button:last-of-type {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.active {
outline: 2px lightblue solid;
outline-offset: -2px;
}
#foreman {
transform: translate(0, 1.5px)
}
.btn.remove {
display: block;
border-radius: 4px;
float: right;
}
<form id='phone'>
<fieldset class='main'>
<legend>Add Phone Numbers</legend>
<section class='fields'>
<fieldset>
<legend>Phone Number <output value='1'></output></legend>
<button class='btn remove' type='button'>Remove</button>
<label>Phone number is used for:</label>
<menu class='purpose select'>
<button class="btn priv" type='button'>Private</button>
<button class="btn work" type='button'>Work</button>
</menu>
<label>Select the type of phone:</label>
<menu class='type select'>
<button class="btn mob" type='button'>Mobile</button>
<button class="btn tel" type='button'>Telephone</button>
<button class="btn fax" type='button'>Fax</button>
</menu>
<menu class='numbers'>
<form name='numbers'>
<label>Number:&ThickSpace;</label>
<input name='phone' class='number-3' type="tel" placeholder="+27 85 223 5258" required>
<label>&ThickSpace;Ext.&ThickSpace;</label>
<input name='ext' class='number-1' type='number' placeholder='327'>
<button class='btn clear' type='button'>X</button>
</form>
</menu>
</fieldset>
</section>
<fieldset>
<menu class='right'>
<button class='btn cancel' type='button'>Cancel</button>
<button class='btn done'>Done</button>
<button class='btn add' type='button'>Add</button>
</menu>
</fieldset>
<footer>
<menu>
<input id='foreman' name="contact" type="checkbox">
<label for='foreman'>Display on foreman contact list?</label>
</menu>
</footer>
</fieldset>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

When load page , JS add event click for elements ( elements were created)
When you clone new elements ( those do not add event click) and event click of you not working on those elements
You are using Jquery then i suggest you code same as below :
$(document).on('click', ".btn_first_4", function () {
$(this).addClass("is_active");
$(".btn_second_4").removeClass("is_active");
});
//work btn
$(document).on('click', ".btn_second_4", function () {
$(this).addClass("is_active");
$(".btn_first_4").removeClass("is_active");
});
//Bottom 5 btns
$(document).on('click', ".btn_5", function () {
$(this).addClass("is_active");
$(".btn_6,.btn_7,.btn_8").removeClass("is_active");
})
$(document).on('click', ".btn_6", function () {
$(this).addClass("is_active");
$(".btn_5,.btn_7,.btn_8").removeClass("is_active");
})
$(document).on('click', ".btn_7", function () {
$(this).addClass("is_active");
$(".btn_5,.btn_6,.btn_8").removeClass("is_active");
})
$(document).on('click', ".btn_8", function () {
$(this).addClass("is_active");
$(".btn_5,.btn_6,.btn_7").removeClass("is_active");
})
function duplicate(){
const wrapper = document.getElementById("wrapper_1");
const clone = wrapper.cloneNode(true);
clone.id = "wrapper_2";
const main_wrapper = document.getElementById("main-wrapper");
main_wrapper.appendChild(clone)
}
function delete_el() {
const del_el = document.getElementById("wrapper_2");
del_el.remove();
}
.is_active {
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column-bottom phone">
<p class="para_txt">Phone</p>
<div id="main-wrapper">
<div id="wrapper_1" class="parentClass">
<div class="basic_infor">
<p>Select the nature of phone:</p>
<div class="parent_btns">
<button class="func_btns btn_first_4 " >Private</button>
<button class="func_btns btn_second_4" >Work</button>
</div>
</div>
<div class="basic_infor">
<p>Select the type of phone:</p>
<div class="parent_btns">
<button class="func_btns btn_5">Mobile</button>
<button class="func_btns btn_6 ">Telephone</button>
<button class="func_btns btn_7 ">Fax</button>
<button class="func_btns btn_8">Extension</button>
</div>
</div>
<div class="txt_area">
<input type="textarea" placeholder="+27 85 223 5258">
<span onclick="delete_el();">x</span>
</div>
</div>
</div>
<div class="btn_add">
<button class="repl_btns phone_repl" onclick="duplicate();">Add additional</button>
<p>Display on foreman contact list?</p>
<input type="checkbox" id="input_field" name="Phone_contact">
</div>
</div>

How do I iterate through multiple custom upload files buttons?

I have some code that works perfectly for grabbing and clicking a custom upload file button. The thing is I want it to duplicate this form 2 more times to have the user use 3 upload buttons in my overall form. So the user will be able to upload three files. My question is, how do I change my vanilla JavaScript so that instead of grabbing the one element, it grabs multiple elements? Do I use getElementsByClassName? And if I do how do I iterate through each form element individually to upload the file?
Upload form 1:
<input type="file" id="real-file" hidden="hidden" />
<button type="button" id="custom-button">CHOOSE A FILE</button>
<span id="custom-text">No file chosen, yet.</span>
Upload form 2:
<input type="file" id="real-file" hidden="hidden" />
<button type="button" id="custom-button">CHOOSE A FILE</button>
<span id="custom-text">No file chosen, yet.</span>
upload form 3:
<input type="file" id="real-file" hidden="hidden" />
<button type="button" id="custom-button">CHOOSE A FILE</button>
<span id="custom-text">No file chosen, yet.</span>
const realFileBtn = document.getElementById("real-file");
const customBtn = document.getElementById("custom-button");
const customTxt = document.getElementById("custom-text");
customBtn.addEventListener("click", function() {
realFileBtn.click();
});
realFileBtn.addEventListener("change", function() {
if (realFileBtn.value) {
customTxt.innerHTML = realFileBtn.value.match(
/[\/\\]([\w\d\s\.\-\(\)]+)$/
)[1];
} else {
customTxt.innerHTML = "No file chosen, yet.";
}
});
CSS
#custom-button {
padding: 10px;
color: white;
background-color: #009578;
border: 1px solid #000;
border-radius: 5px;
cursor: pointer;
}
#custom-button:hover {
background-color: #00b28f;
}
#custom-text {
margin-left: 10px;
font-family: sans-serif;
color: #aaa;
}

As suggested by #Taplar, you'll need to change IDs to classes and then somehow link the elements (I used data-file-input-id).
One of the possible solutions could be:
HTML:
<input type="file" class="real-file" id="first" hidden="hidden" />
<button type="button" class="custom-button" data-file-input-id="first" >CHOOSE A FILE</button>
<span class="custom-text" data-file-input-id="first">No file chosen, yet.</span>
<input type="file" class="real-file" id="second" hidden="hidden" />
<button type="button" class="custom-button" data-file-input-id="second">CHOOSE A FILE</button>
<span class="custom-text" data-file-input-id="second">No file chosen, yet.</span>
<input type="file" class="real-file" id="third" hidden="hidden" />
<button type="button" class="custom-button" data-file-input-id="third">CHOOSE A FILE</button>
<span class="custom-text" data-file-input-id="third">No file chosen, yet.</span>
JS:
// Grab only buttons with data-file-input-id attribute
const buttons = document.querySelectorAll("button[data-file-input-id]");
const fileInputs = document.querySelectorAll("input[type=file]");
Array.from(buttons).forEach(function (button) {
button.addEventListener("click", function () {
const correspondingInputId = button.getAttribute("data-file-input-id");
document.getElementById(correspondingInputId).click();
});
});
Array.from(fileInputs).forEach(function (fileInput) {
fileInput.addEventListener("change", function () {
const fileInputId = fileInput.id;
const correspondingTextField = document.querySelector(
'span[data-file-input-id="' + fileInputId + '"]'
);
if (fileInput.value) {
correspondingTextField.innerHTML = fileInput.value.match(
/[\/\\]([\w\d\s\.\-\(\)]+)$/
)[1];
} else {
correspondingTextField.innerHTML = "No file chosen, yet.";
}
});
});
CSS:
.custom-button {
padding: 10px;
color: white;
background-color: #009578;
border: 1px solid #000;
border-radius: 5px;
cursor: pointer;
}
.custom-button:hover {
background-color: #00b28f;
}
.custom-text {
margin-left: 10px;
font-family: sans-serif;
color: #aaa;
}

How to correctly place .addClass and .removeClass in Modal Box?

The problem is that I have been made aware that I should stop using .hide and .show within my javascript. Now I have learned that a better alternative is to use .addClass and .removeClass as this provides better control and more stylizing.
However for some reason the code is not working. Could I please get help?
I have replaced the previous .hide and .show with the new .addClass and .removeClass, I have provided a new class named showme and even css to display the code as a block.
var content = "";
$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
$('#myDiv, #myDivs').hide();
$('input[type=checkbox]').prop('checked', false);
});
$('.yourCheckbox, .yourCheckboxx').change(function() {
if ($(this).prop("checked")) {
$("#" + $(this).data('target')).addClass('showme');
content = $("#" + $(this).data('target')).html();
} else {
$("#" + $(this).data('target')).removeClass('showme');
content = "";
}
});
$('[rel="modal:close"]').on('click', () => {
$('.btn').parent().append(content);
})
.onlyThese {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label {
color: blue
}
input[type="checkbox"] {
display: none
}
input[type="checkbox"]:checked+label {
color: red
}
}
input:focus {
outline: none;
}
.showme {
display: block;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<p>
<a class="btn" href="#ex5">Sectors </a>
</p>
<div id="ex5" ; class="modal" ; style="background-color:white">
<div style="float:left;">
<p>
<input type="checkbox" id="group1" class="yourCheckbox" data-target="myDiv" checked="checked">
<label for="group1" class="onlyThese">Publication </label>
</p>
<div id="myDiv" class="showme"> blastoise </div>
<p>
<input type="checkbox" id="group2" class="yourCheckboxx" data-target="myDivs" checked="checked">
<label for="group2" class="onlyThese">Food </label>
</p>
<div id="myDivs" class="showme"> water </div>
</div>
<div>
<div>
<p style="float:right">
<b>Apply</b>
</p>
</div>
</div>
All I want is for the code to work the way it used to with .hide and .show but instead now using .addClass and .removeClass.

You may have to remove and add class in different conditions or you could use toggleClass using .hideme class instead of .showme:
var content = "";
$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
$('#myDiv, #myDivs').addClass('hideme');
$('input[type=checkbox]').prop('checked', false);
});
$('.yourCheckbox, .yourCheckboxx').change(function() {
if ($(this).prop("checked")) {
//$("#" + $(this).data('target')).removeClass('hideme');
content = $("#" + $(this).data('target')).html();
} else {
//$("#" + $(this).data('target')).addClass('hideme');
content = "";
}
$("#" + $(this).data('target')).toggleClass('hideme');
});
$('[rel="modal:close"]').on('click', () => {
$('.btn').parent().append(content);
})
.onlyThese {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label {
color: blue
}
input[type="checkbox"] {
display: none
}
input[type="checkbox"]:checked+label {
color: red
}
}
input:focus {
outline: none;
}
.hideme {
display: none;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<p>
<a class="btn" href="#ex5">Sectors </a>
</p>
<div id="ex5" ; class="modal" ; style="background-color:white">
<div style="float:left;">
<p>
<input type="checkbox" id="group1" class="yourCheckbox" data-target="myDiv" checked="checked">
<label for="group1" class="onlyThese">Publication </label>
</p>
<div id="myDiv" class="showme"> blastoise </div>
<p>
<input type="checkbox" id="group2" class="yourCheckboxx" data-target="myDivs" checked="checked">
<label for="group2" class="onlyThese">Food </label>
</p>
<div id="myDivs" class="showme"> water </div>
</div>
<div>
<div>
<p style="float:right">
<b>Apply</b>
</p>
</div>
</div>

Drop-down list closes at unwanted time

I want to create search-input with drop-down list. The list must close when i have focused or clicked anywhere except search-input.
I added listClose() to "blur"-Listener. But now I can`t catch click-event from drop-down elements. Which is the event-listener I really need? Or I need the another realization?
Please, run snippet below. I tried to write it the most clear.
document.addEventListener("DOMContentLoaded", function() {
var inputElement = document.getElementById("input_word-search");
var listElement = document.getElementById("dd-menu_search-input");
// Input will focused when document is ready.
inputElement.focus();
listOpen = function() {
listElement.classList.add('dd-open');
};
listClose = function() {
listElement.classList.remove('dd-open');
};
inputElement.addEventListener("focus", function(e) {
listOpen();
});
inputElement.addEventListener("blur", function(e) {
listClose();
});
})
.dd-menu {
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
position: absolute;
display: none;
}
.dd-suggestion {
cursor: pointer;
text-align: left;
padding: 3px 20px;
line-height: 24px;
}
.dd-suggestion:hover {
color: #fff;
background-color: #697981;
}
.dd-open {
display: block;
}
.dd-empty {
display: none;
}
#dd-menu_search-input {
width: 74%;
}
<body>
<div id="input-group">
<input id="input_word-search" class="input_search suggest__field" type="search" autocomplete="off" name="q" placeholder="Seach">
<div id="dd-menu_search-input" class="dd-menu dd-open">
<div class="dd-dataset">
<div class="dd-suggestion" onclick="alert('Click!')">
suggestion-1
</div>
<div class="dd-suggestion" onclick="alert('Click!')">
suggestion-2
</div>
<div class="dd-suggestion" onclick="alert('Click!')">
suggestion-3
</div>
<div class="dd-suggestion" onclick="alert('Click!')">
suggestion-4
</div>
<div class="dd-suggestion" onclick="alert('Click!')">
suggestion-5
</div>
</div>
</div>
</div>
</body>

A solution (or may I say workaround) is to use onmousedown instead of onclick, so it will look like this (Note that I'm also removing the alert() and using a console.log() instead)
<body>
<div id="input-group">
<input id="input_word-search" class="input_search suggest__field" type="search" autocomplete="off" name="q" placeholder="Seach">
<div id="dd-menu_search-input" class="dd-menu dd-open">
<div class="dd-dataset">
<div class="dd-suggestion" onmousedown="console.log('Click!')">
suggestion-1
</div>
<div class="dd-suggestion" onmousedown="console.log('Click!')">
suggestion-2
</div>
<div class="dd-suggestion" onmousedown="console.log('Click!')">
suggestion-3
</div>
<div class="dd-suggestion" onmousedown="console.log('Click!')">
suggestion-4
</div>
<div class="dd-suggestion" onmousedown="console.log('Click!')">
suggestion-5
</div>
</div>
</div>
</div>
</body>

The reason is when you focusout the textbox, it call blur function and the list immediately disapear. So you can't click on the list. You can walkaround by setTimeout to listClose() like this
listClose = function() {
setTimeout(()=>{
listElement.classList.remove('dd-open');
},100)
};

I added boolean-variable that indicates mousedown-event on drop-down list
var mousedownOnNodeCalee = false;
listElement.addEventListener("mousedown", function (e) {
mousedownOnNodeCalee = true;
});
inputElement.addEventListener("blur", function (e) {
if(!mousedownOnNodeCalee) {
listClose();
return;
}
inputElement.focus();
mousedownOnNodeCalee = false;
});

Get text box with textfields on radio button click

I'm coding a page with some radio buttons and stuck with some problems. Here is my
current output
Below is my code
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#sitehtn {
display: none
}
.container {
width: 100%;
height: 600px;
background-color: rgb(179, 174, 174);
}
#datepickerT {
margin-left: 2em;
}
.eventDateDiv {
height: 150px;
width: 30%;
margin-left: auto;
margin-right: auto;
}
#daysBetween {
margin-top: -1.4em;
margin-left: 30%;
}
.eventShowDiv {
height: 250px;
width: 30%;
margin-left: auto;
margin-right: auto;
}
.event {
color: green;
margin-top: 5px;
}
</style>
<script>
$(function() {
$( "#datepickerF" ).datepicker({
showOn : "button",
buttonImage : "calendar.gif",
buttonImageOnly : true
});
$( "#datepickerT" ).datepicker({
showOn : "button",
buttonImage : "calendar.gif",
buttonImageOnly : true
});
$('#getdays').click(function() {
var start = $('#datepickerF').datepicker('getDate');
var end = $('#datepickerT').datepicker('getDate');
var days = (end - start)/1000/60/60/24;
document.getElementById("daysBetween").innerText=days;
});
$('input[type=radio]').change(function() {
$('#sitehtn').hide()
$(this).parent().next().show()
});
function displayResult(browser) {
document.getElementById("result").value=browser
}
});
</script>
</head>
<body>
<div class="container">
<div class="eventDateDiv">
<div class="event">
EVENT DATE
</div>
<p>FROM: <input type="text" id="datepickerF" /></p>
<p>To: <input type="text" id="datepickerT" /></p>
<button id="getdays">NO.OF DAYS </button>
<p id="daysBetween"> </p>
</div>
<div class="eventShowDiv">
<div class="event">
EVENT SHOW TIME
</div>
<p>TYPE OF SHOW: </p>
<label>
<input type="radio" name="sitewebGroup" value="Courtier" id="courtierRadio" />
Unique
</label>
<input type="text" name="site" id="sitehtn" />
<br />
<label>
<input type="radio" name="sitewebGroup" value="Agence" id="agenceRadio" />
Varied
</label>
<input type="text" name="textfield3" id="sitehtn" />
</div>
</div>
</body>
</html>
My actual expected output is.
When I click on Unique radioButton, A textbox will appear and automatically Next
Radio Button(Varied)will hide
The Text Box include..Four Text Fields Inside it..two fields For The FROM and
TO Date picker and a Content Placeholder,and Last a Button To add same 4
Fields to the next Line in the same Text Box
As I'm new in this field, I need your support and valuable comments to solve this.

This may work with the date picker. You have to add the content holder and textbox though.
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#sitehtn {
display: none
}
.container {
width: 100%;
height: 600px;
background-color: rgb(179, 174, 174);
}
#datepickerT {
margin-left: 2em;
}
.eventDateDiv {
height: 150px;
width: 400px;
margin-left: 0;
margin-right: auto;
}
#daysBetween {
margin-top: -1.4em;
margin-left: 30%;
}
.eventShowDiv {
height: 250px;
width: 30%;
margin-left: auto;
margin-right: auto;
}
.event {
color: green;
margin-top: 5px;
}
</style>
<script>
function loading() {
$( ".datepickerF" ).datepicker({
showOn : "button",
buttonImage : "calendar.gif",
buttonImageOnly : true
});
$( ".datepickerT" ).datepicker({
showOn : "button",
buttonImage : "calendar.gif",
buttonImageOnly : true
});
$('.getdays').click(function() {
var start = $(this).prev().prev().find('input').datepicker('getDate');
var end = $(this).prev().find('input').datepicker('getDate');
var days = (end - start)/1000/60/60/24;
$(this).next().text(days);
});
$('input[id=courtierRadio]').change(function() {
$('#hideRadio').html("");
$('#hideRadio').append(getAppleInfo());
});
function displayResult(browser) {
document.getElementById("result").value=browser
}
};
window.onload = loading;
// anti-pattern! keep reading...
function getAppleInfo() {
var eventDateDiv ="";
eventDateDiv = $("<div></div>").addClass("eventDateDiv");
eventDateDiv.append($("<p></p>").text("FROM: ").append($("<input>").attr("class", "datepickerF").attr("type", "text")));
eventDateDiv.append($("<p></p>").text("TO: ").append($("<input>").attr("class", "datepickerT").attr("type", "text")));
eventDateDiv.append($("<button></button>").text("NO.OF DAYS ").attr("class", "getdays"));
eventDateDiv.append($("<p></p>").attr("class", "daysBetween"));
eventDateDiv.append($("<a>").text("Add Another").attr("href", "#").attr("onclick", "belowDiv(this)"));
return eventDateDiv;
}
function belowDiv(self){
$('#hideRadio').append(getAppleInfo());
loading();
}
</script>
</head>
<body>
<div class="container">
<div class="eventDateDiv" title="numb">
<div class="event">
EVENT DATE
</div>
<p>FROM: <input type="text" class="datepickerF" /></p>
<p>To: <input type="text" class="datepickerT" /></p>
<button class="getdays">NO.OF DAYS </button>
<p class="daysBetween"> </p>
</div>
<div class="eventShowDiv" title="dumb">
<div class="event">
EVENT SHOW TIME
</div>
<p>TYPE OF SHOW: </p>
<label>
<input type="radio" name="sitewebGroup" value="Courtier" id="courtierRadio" />
Unique
</label>
<input type="text" name="site" />
<br />
<div id="hideRadio">
<label>
<input type="radio" name="sitewebGroup" value="Agence" id="agenceRadio" />
Varied
</label>
<input type="text" name="textfield3" />
</div>
</div>
</div>
</body>
</html>

For your #1 question try this.
$('#courtierRadio').on('change', function () {
$('#sitehtn').show();
$('#agenceRadio').hide();
});