单击时添加新表单

When the user clicks at the "Add New Job" link, a new form containing three fields will appear. That's the main form:

<h2>JOB EXPERIENCE 1</h2>
<div class="job-content">
  <input type="text" value="Company" name="company" />
  <input type="text" value="Course" name="course" />
  <input type="date" value="Date" name="date" />
</div>

<h1><a href="add-new-form">ADD NEW JOB +</a></h1>
//When clicked, it will show another form, with the same fields from the form above. 

<h2>JOB EXPERIENCE 2</h2>
<div class="job-content">
  <input type="text" value="Company" name="company2" />
  <input type="text" value="Course" name="course2" />
  <input type="date" value="Date" name="date2" />
</div>

I appreciate any help.

Try this:

Edited HTML:

<h2>JOB EXPERIENCE 1</h2>

<div class="job-content">
    <input type="text" value="Company" name="company" />
    <input type="text" value="Course" name="course" />
    <input type="date" value="Date" name="date" />
</div>

<h1 id="add_job"><a href="add-new-form" onclick="return false;">ADD NEW JOB +</a></h1>

JavaScript:

var i = 1;
$("#add_job").click(function() {
    $("body").append("<h2>JOB EXPERIENCE "+ ++i + "</h2>");
    $("body").append($(".job-content:nth-child(2)").clone());
});

HTML Explanation:

Nothing much edited but on the click of the hyperlink I made sure that it should return false or else it would link to another page.

JavaScript Explanation:

First I set a variable to one which is the number of job experiences that will be incremented every time the button is clicked. Then on the click of the h1 of the link I append two things in the body. The first is the h2 which is the heading for the job experiences and the second thing is the copy of the first form that is present already their.

It will add more form if u click "ADD NEW JOB +";

<h2>JOB EXPERIENCE 1</h2>
<div class="job-content">
  <input type="text" value="Company" name="company" />
  <input type="text" value="Course" name="course" />
  <input type="date" value="Date" name="date" />
</div>
<div id="concat"></div>
<h1><a href="javascript:;" id="addfield">ADD NEW JOB +</a></h1>

<script>    
$("#addfield").click(function(){

var detailContent = '<h2>JOB EXPERIENCE 1</h2>
                     <div class="job-content">
  <input type="text" value="Company" name="company" />
  <input type="text" value="Course" name="course" />
  <input type="date" value="Date" name="date" />
</div>';    

$('#concat').append(detailContent); 

    });
</script>  

A quick JQuery solution:

$("#add-new-form").on("click",function{
   var form = '<form>
               <div class="job-content">
                 <input type="text" value="Company" name="company" />
                 <input type="text" value="Course" name="course" />
                 <input type="date" value="Date" name="date" />
               </div>
               </form>';
   $('body').append(form);
});

I have no means of testing but is this like something you were looking for?

Working Fiddle: http://jsfiddle.net/2JgtT/

Note: you need somekind of logic to add more than 2 job fields.. this is just a sample.

HTML:

<h2>JOB EXPERIENCE 1</h2>

<div class="job-content">
    <input type="text" value="Company" name="company" />
    <input type="text" value="Course" name="course" />
    <input type="date" value="Date" name="date" />
</div>
<div class="jobfields">

<h2>JOB EXPERIENCE 2</h2>

    <div class="job-content">
        <input type="text" value="Company" name="company2" />
        <input type="text" value="Course" name="course2" />
        <input type="date" value="Date" name="date2" />
    </div>
</div>

<h1><a href="add-new-form" class="addjob">ADD NEW JOB +</a></h1>

Jquery:

$(document).on("click", ".addjob", function (e) {
    e.preventDefault();
    $('.job-content').next('.jobfields').show();
});

OR this may be: http://jsfiddle.net/2JgtT/3/ look at the html, i have wrapped the divs in container

$(document).on("click", ".addjob", function (e) {
    e.preventDefault();
    addJobField();
});

function addJobField() {
    $('.container').append("<div class='job-content'> " +
        "<input type='text' value='Company' name='company' />" +
        "<input type='text' value='Course' name='course' /> " +
        "<input type='date' value='Date' name='date' /> </div>");
}

Use Jquery append method when the Button is clicked using click event

$('#id').click(function() {
var x=$("#formid").html();

$("body").append(x);
});

You can use jQuery .clone() to copy the original .job-content and then increment the form item names to replicate your example output.

This will also allow you to expand on the number of inputs if needed in the future without updating your JavaScript code.

$(function () {
    var duplicates = 0,
        $original = $('.job-content').clone(true);

    function DuplicateForm () {
        var newForm;

        duplicates++; 

        newForm = $original.clone(true).insertBefore($('h1'));

        $.each($('input', newForm), function(i, item) {            
            $(item).attr('name', $(item).attr('name') + duplicates);
        });

        $('<h2>JOB EXPERIENCE ' + (duplicates + 1) + '</h2>').insertBefore(newForm);
    }

    $('a[href="add-new-form"]').on('click', function (e) {
        e.preventDefault();
        DuplicateForm();
    });
});

Working example - JSFiddle

Updated to clone the original job-content on page load so original form values are preserved.

<a href="" id="test">test</a>
<div id="test1"></div>
<script>    
$("#test").click(function(){

    var detailContent = '<div>what portion need to add there</div>';    

    $('#test1').append(detailContent); 

});
</script>