Load the whole section using jquery

[Mazhar_Shaikh]

hi there, i just need some help here i want to load a whole form section on button click, like add more form and it displays at bottom and till 5 forms should be loaded ,the button is named as **ADD MORE?**heres the code.

    <div class="card"> < div class = "card__header" >
    < h2 > Campaign Survey Form < /h2> < /div>< form class = "card__body form-horizontal" >< div class = "form-group" > < div class = "col-sm-10" >
    < input type = "text"
class = "form-control"
placeholder = "Campaign Name"
id = "cname"
required >
    < /div> < /div> < div class = "form-group" >
    < div class = "col-sm-10" >
    < h6 > Campaign Image < /h6> < div class = "hidebtn" > < input type = "file"
class = "hidefile" > Choose file < /div> < /div> < /div> < div class = "form-group" >
    < div class = "col-sm-10" >
    < input type = "text"
class = "form-control"
placeholder = "Campaign Description"
id = "cdesc"
required >
    < /div> < /div>	 < div id = "border"
class = "col-md-12" > < /div>


< div class = "card__header"
style = "margin-left:-31px" >
    < h2 > Campaign Question 's</h2> < /div> < div class = "form-group" >
    < div class = "col-sm-10" >
    < input type = "text"
class = "form-control"
placeholder = "Enter your Question?"
id = "q1"
required >
    < /div> < /div> < div class = "form-group" >
    < div class = "col-sm-10" >
    < input type = "text"
class = "form-control"
placeholder = "Choice 1"
id = "a1"
required >
    < /div> < div class = "col-sm-10" >
    < input type = "text"
class = "form-control"
placeholder = "Choice 2"
id = "a2"
required >
    < /div> < div class = "col-sm-10" >
    < input type = "text"
class = "form-control"
placeholder = "Choice 3"
id = "a3"
required >
    < /div> < div class = "col-sm-10" >
    < input type = "text"
class = "form-control"
placeholder = "Choice 4"
id = "a4"
required >
    < /div>

< /div>

< div class = "form-group" >
    < div class = "col-sm-10" >
    < button type = "button"
class = "myadd" > Add More ? < /button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; < button type = "button"
class = "mydan" > End Campaign < /button> < /div> < /div> < div class = "form-group" >
    < div class = "col-sm-6" >
    < input type = "number"
class = "form-control"
placeholder = "Set Budget"
id = "cost"
required > < b id = "inr" > INR < /b> < /div> < /div> < div class = "form-group" >
    < div class = "col-sm-10" >
    < button type = "submit"
class = "myapprove" > Send For Approval < /button> < /div> < /div> < /form> < /div>

[parenttobias]

Not sure I entirely understand, let’s try for clarification.
Are you asking to have the “Enter your question?” input and maybe one answer input displayed, with the button allowing you to display additional answer inputs, one at a time? Or are you displaying the question with five answer blocks, and looking to add another question?
You might consider stripping out the rest of the HTML and working with just the code you need, till you get the action you’re looking for. As an example, take a look at https://jsfiddle.net/snowMonkey/Lt7ujcar/ – I’ve set up a fiddle that takes a single question and answer, and allows the addition of other answers, to a limit of five.
Once you have the HTML and code doing what you want, THEN you can integrate it back into a larger form. IMHO, it will give you the least red herring headaches.

[Mazhar_Shaikh]

thankyou for replyin its sorted now

[Mazhar_Shaikh]

hi There i have some slight problem with the range display when displayin copy forms,actually the whole form is making clone perfectly is just that the range value is zero and in the original form its displaying .i dont knw how to solve this issue here the code of the form with javascript code

<script>
    var counter = 1;
    var limit = 5;

    function addInput(display) {
        if (counter == limit) {
            alert("You have reached the limit of adding " + counter + " inputs");
        } else {
            var newdiv = document.createElement('div');
            newdiv.innerHTML =
                '<div class="card" id="display">' +
                '<div class="card__header">' +
                ' <h2>Campaign Survey Form</h2>' +
                '</div>' +

                '<form class="card__body form-horizontal">' +
                '<div class="form-group">' +
                '<div class="col-sm-10">' +
                '<input type="text" class="form-control" placeholder="Campaign Name" id="cname" required>' +
                '</div>' +
                '</div>' +
                '<div class="form-group">' +
                '<div class="col-sm-10">' +
                ' <h6>Campaign Image</h6>' +
                ' <div class="hidebtn"><input type="file" class="hidefile">Choose file</div>' +
                ' </div>' +
                '</div>' +
                '<div class="form-group">' +
                '<div class="col-sm-10">' +
                '<input type="text" class="form-control" placeholder="Campaign Description" id="cdesc" required>' +
                '</div>' +
                '</div>' +
                '<div id="border" class="col-md-12"></div>' +
                '<div class="card__header" style="margin-left:-31px">' +
                '<h2>Campaign Questions</h2>' +
                ' </div>' +
                '<div class="form-group">' +
                ' <div class="col-sm-10">' +
                ' <input type="text" class="form-control" placeholder="Enter your Question?" id="q1" required>' +
                '</div>' +
                '</div>' +
                '<div class="form-group">' +
                ' <div class="col-sm-10">' +
                '<input type="text" class="form-control" placeholder="Choice 1" id="a1" required>' +
                '</div>' +
                '<div class="col-sm-10">' +
                '<input type="text" class="form-control" placeholder="Choice 2" id="a2" required>' +
                '</div>' +
                '<div class="col-sm-10">' +
                ' <input type="text" class="form-control" placeholder="Choice 3" id="a3" required>' +
                '</div>' +
                '<div class="col-sm-10">' +
                ' <input type="text" class="form-control" placeholder="Choice 4" id="a4" required>' +
                '</div>' +
                '</div>' +
                '<div id="border" class="col-md-12"></div>' +
                '<div class="form-group">' +
                '<div class="col-sm-12">' +
                '<h6>Set Budget</h6>' +
                '<br>' +
                '<div class="range-slider" style="float:left;"> ' +
                '<input class="range-slider__range" type="range" value="100000" min="100000" max="500000" style="float:left ;width:80%;" >' +
                '<div style="float:left ;width:57px; margin-top: -3px;   background:#2c3e50;" class="range-slider__value">' +
                '<span style="float:left ;  background: #2c3e50;">0</span></div>' +
                '<b style="float:left; margin-top: -3px;width:20px;" id="inr">INR</b>' +
                '</div>' + '</div>' + '</div>' +
                '<div class="form-group">' +
                ' <div class="col-sm-10">' +
                '<button type="submit" class="myapprove">Send For Approval</button>' +
                '</div>' +
                '</div>' +
                ' </form>' +
                '</div>';
            document.getElementById(display).appendChild(newdiv);
            counter++;
        }
    }
</script>





javascript code

<script>
	var rangeSlider = function(){  var slider = $('.range-slider'),   
   range = $('.range-slider__range'),     
   value = $('.range-slider__value');     
   slider.each(function(){    value.each(function(){var value = $(this).prev().attr('value');      
   $(this).html(value);    });    
   range.on('input', function(){      $(this).next(value).html(this.value);    });  });};
   rangeSlider();

</script>