We Keep Coding

how to reset hidden text fields when a form is duplicated

I have a form with dropdown select menus, and depending what you choose, it will show a hidden text fields that you have to full fill. When I click on the 'duplicate button', the javascript works fine and duplicates the entire form. The select dropdown menu and all the fields that are NOT hidden are reset, which is what I want. However, all the hidden fields end up duplicating the answers from the previous form.
The 2nd problem is, if I don't select a choice that does NOT contain a hidden field in my original form, on the duplicate form, the javascript to show the hidden fields for the dropdown menus will not work. For example, there's a dropdown with choices 1 and 2. If you choose 1, there's no hidden field that shows, and if you choose 2, there will be a hidden field that you have to answer. If I chose #1 in the previous form, then in the duplicate form, the dropdown shows both 1 and 2, but nothing will happen if I choose 2, and that's because in the previous form I had chosen #1 so I guess the javascript function didn't get duplicated? what if on the duplicate form I want to choose #2? I can't.
Here's my code
HTML
<div class="form-group">
<select class="selectDD" id="FHB_OrgEvent" onchange='showIfEvent();'>
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<div style="display:none;" class="hidden" id="showFhbEventName">
<input type="text" id="FHBEventName" placeholder="Name of Event"/>
</div>
<div style="display:none;" class="hidden" id="showFhbEventDesc">
<input type="text" id="FHBEventDesc" placeholder="Please provide a brief description of the event or activity"/>
</div>
</div>
<div id="add-del-buttons" class="add-del-buttons">
<input type="button" id="btnAdd" value="duplicate">
</div>
Javascript for showing hidden fields
function showIfEvent() {
if (FHB_OrgEvent.value == "1") {
showFhbEventName.style.display = "block";
showFHBEventDesc.style.display = "block";
} else {
showFhbEventName.style.display = "none";
showFHBEventDesc.style.display = "none";
}
}
Javascript for Duplicate function
$('#btnAdd').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
// manipulate the name/id values of the input inside the new element
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
// insert the new element after the last "duplicatable" input field
$('#input' + num).after(newElem);
});

How can I print the content of a HTML input field multiple times using jQuery?

I have this input field and a button
I write a name in the input field push the button and it writes under the input field the name every time you push the button it adds under the previous name the next name
jquery code
var naam = new array["registration:"];
$(document).register(function(){
$("#confirm").click(function(){
for (var i = 0; i < naam.length; i++) {
naam.push('<span>' + "inName"+ '</span>')
}
})
});
html code
<p>Please enter your name below.</p>
<span id="name">Name:</span><input type="text" id="inName"><button id="confirm">Confirm</button>
<p id="registration"></p>

Here is a quick example showing keeping a log of names entered in an array and also inserting those names each time under the text field.
Fiddle: http://jsfiddle.net/AtheistP3ace/kzws8fok/
JS:
var registeredNames = [];
$('#confirm').on('click',
function () {
inName = $('#inName');
var newName = inName.val();
registeredNames.push(newName);
$('#registration').append('<div>' + newName + '</div>');
inName.val('');
$('#currentArray').text(JSON.stringify(registeredNames));
}
);
HTML:
<p>Please enter your name below.</p> <span id="name">Name:</span>
<input type="text" id="inName">
<button type="button" id="confirm">Confirm</button>
<p id="registration"></p>
<div id="currentArray"></div>

I think your trying to Achieve this: Fiddle
HTML
<p>Please enter your name below.</p>
<span id="name">Name:</span><input type="text" id="inName"><button id="confirm">Confirm</button>
<ul id="registration"></ul>
Script
$('#confirm').click(function(){
if($('#inName').val() != ""){
$('#registration').prepend('<li>'+ $('#inName').val() +'</li>');
$('#inName').val("");
}
});

Javascript text input (+checkbox options) and text output to easily Ctrl + C

The closest existing thread I could find on here is this one:
How can I output multiple text fields to one page
And it's a similar idea. Basically my objective is to allow for multiple inputs (text, checkboxes, etc) and then output into a simple text field that is preferably automatically copied to one's clipboard but it doesn't have to be that fancy, as long as it can easily be copied and pasted elsewhere.
Background:
At work, we have a naming convention we use for creating contracts and they follow the same sort of format but if we can easily punch in the same fields and check off certain products to then output text to copy and paste, it would make life SO much easier.
I was working off those input your name and then it outputs a "Hi whatever you inputed!" scripts and also looking into mad lib javascripts because they are kind of the same idea minus the checkboxes... but I am stuck. I am a javascript newbie so I am not sure how to properly incorporate multiple textboxes and checkbox options to output into one line of text (that would be great to have a feature similar to those coupon sites like retailmenot where you just click into it and it automatically Ctrl + C it for you)
So using the above as a starting point, my idea is that
1) Where it says Type your Name (text box), it would have about 5 of those fields
2) 4 sets of multiple checkbox options with the last checkbox a text field that is equivalent to "other"
3) Then once the button is clicked, I would like it to output a certain text string based on the above fields that the user has inputed in the textbox and the checkbox options that had been checked (including adding in the "other" field if applicable) that links all these inputs together in a way that looks like (text1)(text2)(text3)_etc
Are there any existing code, links to tutorials for this or instructions on how I can modify the example javascript to accomplish something like this? Note: I am a javascript newbie
thanks!

I created this simple script a while back. Is this what you are after?
Working Fiddle
html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
First Name :
<input type="text" name="fName" />
<br>Last Name :
<input type="text" name="lName" />
<br>Gender :
<input type="radio" name="gender" value="male" />Male
<input type="radio" name="gender" value="female" />Female
<br>Occupation :
<select name="occ">
<option value="carpenter">Carpenter</option>
<option value="engineer">Engineer</option>
<option value="doctor">Doctor</option>
</select>
<br>Pref :
<input type="checkbox" name="one" />One
<input type="checkbox" name="two" />Two
<br>
<textarea id="result"></textarea>
<br>
<button id="submitBtn">Submit</button>
<div id="message" style="color:red"></div>
jquery
$("#submitBtn").click(function () {
var firstName = $("input[name=fName]").val();
var latName = $("input[name=lName]").val();
var gender = $("input[name=gender]:checked").val();
var occ = $("select[name=occ]").val();
var pref1 = $("input[name=one]").is(":checked");
var pref2 = $("input[name=two]").is(":checked");
$("#result").val(firstName + " " + latName + " " + gender + " " + occ + " " + pref1 + " " + pref2);
$('#result').focus(function () {
this.select();
document.execCommand("copy");
$("#message").html("Text copied to clipboard!");
}).mouseup(function () {
return false;
});
$('#result').focus();
});

jQuery clone form not working twice in the same page

I am trying to use the same form twice in the same page the form is working once but not twice i think the problem is with id or something but i am not sure i am not very good with javascript
Help appreciated.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function () {
$('#btnAdd').click(function () {
var num = $('.clonedInput').length, // Checks to see how many "duplicatable" input fields we currently have
newNum = new Number(num + 1), // The numeric ID of the new input field being added, increasing by 1 each time
newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value
// H2 - section
newElem.find('.heading-reference').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('Entry #' + newNum);
// Title - select
newElem.find('.label_ttl').attr('for', 'ID' + newNum + '_title');
newElem.find('.select_ttl').attr('id', 'ID' + newNum + '_title').attr('name', 'ID' + newNum + '_title').val('');
// First name - text
newElem.find('.label_fn').attr('for', 'ID' + newNum + '_first_name');
newElem.find('.input_fn').attr('id', 'ID' + newNum + '_first_name').attr('name', 'ID' + newNum + '_first_name').val('');
// Insert the new element after the last "duplicatable" input field
$('#entry' + num).after(newElem);
$('#ID' + newNum + '_title').focus();
// Enable the "remove" button. This only shows once you have a duplicated section.
$('#btnDel').attr('disabled', false);
// Right now you can only add 4 sections, for a total of 5. Change '5' below to the max number of sections you want to allow.
if (newNum == 5)
$('#btnAdd').attr('disabled', true).prop('value', "You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached
});
$('#btnDel').click(function () {
// Confirmation dialog box. Works on all desktop browsers and iPhone.
if (confirm("Are you sure you wish to remove this section? This cannot be undone."))
{
var num = $('.clonedInput').length;
// how many "duplicatable" input fields we currently have
$('#entry' + num).slideUp('slow', function () {$(this).remove();
// if only one element remains, disable the "remove" button
if (num -1 === 1)
$('#btnDel').attr('disabled', true);
// enable the "add" button
$('#btnAdd').attr('disabled', false).prop('value', "add section");});
}
return false; // Removes the last section you added
});
// Enable the "add" button
$('#btnAdd').attr('disabled', false);
// Disable the "remove" button
$('#btnDel').attr('disabled', true);
});
</script>
</head>
<body>
<div id="wrapper">
<div class="sign-up_box">
<form action="#" method="post" id="sign-up_area">
<div id="entry1" class="clonedInput">
<h2 id="reference" name="reference" class="heading-reference">Entry #1</h2>
<fieldset>
<label class="label_ln" for="last_name">Last name:</label>
<input class="input_ln" type="text" name="last_name" id="last_name" value="">
</fieldset>
</div><!-- end #entry1 -->
<div id="addDelButtons">
<input type="button" id="btnAdd" value="add section"> <input type="button" id="btnDel" value="remove section above">
</div>
<fieldset class="form-actions">
<input type="submit" value="Submit">
</fieldset>
</form>
</div><!-- end sign-up_box -->
</div>
<div id="wrapper">
<div class="sign-up_box">
<form action="#" method="post" id="sign-up_area">
<div id="entry1" class="clonedInput">
<h2 id="reference" name="reference" class="heading-reference">Entry #1</h2>
<fieldset>
<label class="label_ln" for="last_name">Last name:</label>
<input class="input_ln" type="text" name="last_name" id="last_name" value="">
</fieldset>
</div><!-- end #entry1 -->
<div id="addDelButtons">
<input type="button" id="btnAdd" value="add section"> <input type="button" id="btnDel" value="remove section above">
</div>
<fieldset class="form-actions">
<input type="submit" value="Submit">
</fieldset>
</form>
</div><!-- end sign-up_box -->
</div>
</body>
</html>

Id tags must be unique within an HTML document or they won't work right. You'll probably want to "class" instead of "id" and use jQuery class selectors to select the appropriate fields, depending on what exactly you're trying to do.
Here are a few existing StackOverflow questions related to this:
Using same ID for in multiple HTML tags?
Several elements with the same ID responding to one CSS ID selector
javascript duplication ID conflict

You cannot simply clone elements which have an id attribute. There mustn't be two elements with the same id on any single page. So please change the ids of the cloned elements accordingly, and the references to them in the code.

JQuery - dynamically selecting inputs with "nth"

I have a question that I've been stuck on. I have a form and want to dynamically be able to call upon the n-th set of input fields in a form to use them in equations that will output the n-th set of answers. For example "footage2" should be plugged into an equation that will give me "postQuantity2" and then "footage3" should be used to determine "postQuantity3". The problem is that the form can add input areas dynamically so I can't just hard code it to do what I want. Any ideas of how to get the nth set of numbers to be used for an equation and then give me the nth set of answers? If anyone can explain how this would work, or just point out how it wouldn't it'd be very much appreciated! Thanks!
Here is a snippet - http://jsfiddle.net/gv0029/QGW7R/ - to give you a basic idea of what I'm working with and here is some html and js.
HTML
<fieldset id="fence">
<div id="inputFence1" class="clonedInputFence">
<fieldset id="fenceDescripton">
<legend><strong>Fence Description</strong>
</legend>
<label>Footage:
<input type="number" id="footage" name="footage" value="" /></label>
<select name="fenceHeight" id="fenceHeight">
<option value="select">Select Fence Height</option>
<option value="6" id="fH6">6 Ft.</option>
<option value="8" id="fH8">8 Ft.</option>
</select>
</fieldset>
<fieldset id="post">
<legend><strong>Post Type</strong>
</legend>
<label>Post Quantity:
<input type="postQuantity" name="postQuantity" id="postQuantity" value="" />
</label>
<select name="postMeasurements" id="postMeasurements">
<option value="select">Select Post Measurements</option>
<option value="23/8 x .065 x 8" id="23/8 x .065 x 8">2 3/8 x .065 x 8</option>
<option value="23/8 x .095 x 8" id="23/8 x .095 x 8">23/8 x .095 x 8</option>
</select>
</fieldset>
</div>
</fieldset>
<div>
<input type="button" id="btnAddFence" value="Add Another Fence" />
<input type="button" id="btnDelFence" value="Remove Fence" />
</div>
JS
//Quantity for Posts
$('#footage, #manualOverrideNo').bind('keypress keydown keyup change', function(){
var footage = parseFloat($(':input[name="footage"]').val(),10);
var total = '';
if(!isNaN(footage)){
total = Math.ceil(footage /7);
$(':input[name="postQuantity"]').val(total.toString());
} else {
$(':input[name="postQuantity"]').val("");
}
});
//Dynamic Fence Input Fields
$('#btnAddFence').click(function() {
var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#inputFence' + num).clone().attr('id', 'inputFence' + newNum);
//Fieldset creation
newElem.find('fieldset').attr('id', 'fence' + newNum);
//Fence Description
newElem.find("select[name=fenceHeight]").attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum);
newElem.find(':input[name="footage"]').attr('id', 'footage' + newNum).attr('name', 'footage' + newNum);
//Post Type
newElem.find(':input[name="postQuantity"]').attr('id', 'postQuantity' + newNum).attr('name', 'postQuantity' + newNum);
newElem.find("select[name=postMeasurements]").attr('id', 'postMeasurements' + newNum).attr('name', 'postMeasurements' + newNum);
// insert the new element after the last "duplicable" input field
$('#inputFence' + num).after(newElem);
// enable the "remove" button
//$('#btnDel').attr('disabled','');
$('#btnDelFence').removeAttr('disabled');
});
$('#btnDelFence').click(function() {
var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have
$('#inputFence' + num).remove(); // remove the last element
// enable the "add" button
//$('#btnAdd').attr('disabled','');
$('#btnAddFence').removeAttr('disabled');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDelFence').attr('disabled','disabled');
});
$('#btnDelFence').attr('disabled','disabled');

I don't think nth-child will work in this case since there are multiple child elements and the op wants to match them up.
On your footage elements, add a data attribute of, let's say, data-which-pair with a pattern like
id = n data-which-pair = n
$("#footage"+n).click(function(){
var n = $(this).attr("data-which-pair");
Do something cool with $("#postQuantity"+n);
}
You might be able to just do a function(n) but I usually follow this longer-winded approach because it is easier to see what's going on. Keep in mind, obviously, that the above is pseudocode that you will need to adapt.