Looking to duplicate the elements with the click of a button?

I am in need of assistance with my registration form.

My goal is to move the elements contained within the <fieldset> tags to the end of a row when the user clicks the + button.

The result you see initially has been recreated.

Thank you for your support

<script>
  function myFunction() {

  }
</script>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Information Form</title>
</head>
<body>



<fieldset>
<h2 class="fs-title">Registration Form</h2>
    
<div class="form-item webform-component webform-component-textfield hs_average_gift_size_in_year_2 field hs-form-field" id="webform-component-cultivation--amount-2">
<div style="width: 17%;float: right;">
<!-- Begin W_Language Field -->
<label for="W_Language">LANGUAGE</label>
<select id="W_Language" class="form-control" name="W_Language">
<option selected>NONE</option> 
<option>EN</option> 
<option>FR</option> 
<option>GE</option> 
<option>AR</option> 
</select>
<!-- End W_Language Field -->
</div>
<div style="width: 17%;float: right;">
<!-- Begin exam Field -->
<label for="W_exam">EXAM</label>
<select id="W_exam" class="form-control" name="W_exam">
<option selected>NONE</option> 
<option>IELTS</option> 
<option>TOEFL</option> 
<option>GRE</option> 
<option>KET</option> 
<option>FCE</option> 
<option>MSRT</option> 
<option>TOLIMO</option> 
<option>MCHE</option> 
<option>CPE</option> 
</select>
<!-- End W_exam Field -->
</div>
<div style="width: 8%;float: left;">
<!-- Begin W_Language Field -->
<button onclick="myFunction();return false" class="btn1" >+</button>
</div>
<div style="width: 12%;float: left;">
<!-- Begin W_Language Field -->
<label for="W_Speack">speak</label>
<select id="W_Language" class="form-control" name="W_Language">
<option selected>4</option> 
<option>4.5</option> 
<option>5</option> 
<option>5.5</option> 
<option>6</option> 
<option>6.5</option> 
<option>7</option> 
<option>7.5</option> 
<option>8</option> 
<option>8.5</option> 
<option>9</option> 
</select>
<!-- End W_Language Field -->
</div>
<div style="width: 12%;float: left;">
<!-- Begin W_Language Field -->
<label for="W_Listen">listening</label>
<select id="W_Language" class="form-control" name="W_Language">
<option selected>4</option> 
<option>4.5</option> 
<option>5</option> 
<option>5.5</option> 
<option>6</option> 
<option>6.5</option> 
<option>7</option> 
<option>7.5</option> 
<option>8</option> 
<option>8.5</option> 
<option>9</option> 
</select>
<!-- End Language Field -->
</div>
<div style="width: 12%;float: left;">
<!-- Begin Language Field -->
<label for="W_Reading">reading</label>
<select id="Language" class="form-control" name="Language">
<option selected>4</option> 
<option>4.5</option> 
<option>5</option> 
<option>5.5</option> 
<option>6</option> 
<option>6.5</option> 
<option>7</option> 
<option>7.5</option> 
<option>8</option> 
<option>8.5</option> 
<option>9</option> 
</select>
<!-- End Language Field -->
</div>
<div style="width: 12%;float: left;">
<!-- Begin W_Writing Field -->
<label for="W_Writing">writing</label>
<select id="W_Writing" class="form-control" name="W_Writing">
<option selected>4</option> 
<option>4.5</option> 
<option>5</option> 
<option>5.5</option> 
<option>6</option> 
<option>6.5</option> 
<option>7</option> 
<option>7.5</option> 
<option>8</option> 
<option>8.5</option> 
<option>9</option> 
</select>
<!-- End W_Writing Field -->
</div>
</div>


  </fieldset>
</body>

</html>

javascriptcsshtmlbootstrap-4

Answer №1

If you want to duplicate elements, consider using the clone function.

The clone() method creates a replicate of selected elements along with their child nodes, text content, and attributes.

function duplicateElements() {
$(".form-item:last-child").after($(".form-item:last-child").clone(true));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Information Form</title>
</head>
<body>

<fieldset>
<h2 class="fs-title">Registration Form</h2>
    
<!-- More form fields and buttons to duplicate -->

  </fieldset>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Validating American phone numbers using regular expressions

I came across a Javascript regex that is used to validate the different formats in which US phone numbers can be written. However, there seems to be an issue with it: it fails to match the second rule within this specific group: The first group of three ...

javascriptjqueryregexvalidation

Javascript function to deselect all items

One of my functions is designed to reset all checkbox values and then trigger an AJAX request. However, there are instances when the function initiates before the checkboxes have been unchecked. function clear() { $("#a").prop("checked", false); $("#b ...

javascriptjqueryajaxpromise

Choose all elements with a specific class name without the need to specify their position in the list

I'm working on adding a function to my WordPress site that will allow me to show/hide page elements with a specific class. For example, I want any elements (such as rows, containers, and text blocks) that have the 'show-hide' class to be hid ...

javascriptgetelementsbyclassname

Implement the click event binding using classes in Angular 2

If I have the template below, how can I use TypeScript to bind a click event by class? My goal is to retrieve attributes of the clicked element. <ul> <li id="1" class="selectModal">First</li> <li id="2" class="selectModal">Seco ...

javascripttypescriptangular

The challenges of $location.search().name and base href in application URLs

I am working on an Angular app and my URL appears as http://localhost:8080/personal?name=xyz. To extract the 'xyz' value in JavaScript, I am using $location.search().name. Here is a snippet of my code: app.js app.config(function ($locationProv ...

javascriptangularjshtml

Sending confidential data from the view to the controller without relying on form submission

I am looking for a way to pass a hidden field from a view to a controller. Inside index.chtml <div id="root"> ................ @Html.Hidden("HProjectTypeId", "somevalue") </div> The above code snippet is not enclosed within any form tags ...

javascriptjqueryasp.net-mvcformsasp.net-mvc-4

What is the optimal location for storing component fetch logic?

When should I make a REST request to retrieve data for a Vue component called Page, specifically for the properties title and content? Also, where is the best place to handle this logic? Currently, I am trying to fetch the data on the component's rea ...

javascriptvue.jsvuejs2

Is it possible to delete an element from both local storage and HTML by referencing its ID?

Experience a simple flashcard game where you enter a question and answer to create a new flash card stored as an object within the cards array. The newly created flash card is also displayed by appending a new element to the flash cards section on the webp ...

javascripthtmllocal-storage

Error in Next.js PDFtron Webviewer: ReferenceError - 'window' is not defined

Currently, I'm faced with a challenge in setting up a PDF viewer on my nextjs static page. Having recently ventured into Next.js, I'm seeking assistance from you guys to resolve this issue or suggest an alternative approach. While trying to imple ...

javascriptreactjsnext.jsreact-dompdftron

Background image for input button in Internet Explorer 6

Can you create a custom background image for the input type="button" in Internet Explorer 6? ...

htmlcssinternet-explorercross-browser

A tutorial on utilizing fopen in PHP to write text lines to a .txt file

Struggling with PHP code utilizing fopen to write text lines into a textarea and save them to a .txt file. Below is the code I've been working on, hoping to get some assistance! <?php session_start(); if (!isset($_SESSION['username&ap ...

phphtml

Loading an Angular2 app is made possible by ensuring that it is only initiated when a DOM element is detected

In my main.ts file, the code below is functioning perfectly: import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); H ...

javascriptangularjsangulartypescriptwebpack

Issues encountered when attempting to append the array objects to HTML using $.getjson

Hello, I have a JSON data structure as shown below: [{ "menu": "File", }, { "menu": "File1", }] I have created jQuery code to dynamically add the response to my HTML page like this: $(document).ready(function () { $.getJSON('data.json&a ...

javascriptjson

`I'm having issues trying to use ajax and load simultaneously``

Can anyone help me figure out why my AJAX call to sessions.php is not correctly loading and returning true or false each time a user accesses the page? var section = $("#header a"); section.on('click', function() { $.ajax({ type: "PO ...

javascriptjqueryajaxload

Tips on redirecting the treeview menu using Material-UI 4

Currently, I am utilizing Material UI 4's Treeview component. However, I am struggling to figure out how to include a parameter that allows me to redirect to other pages when the user clicks on an item. In the past, I relied on a different method. Ch ...

javascriptreactjsmaterial-ui

What distinguishes defining a function through a prototype versus as a class property?

Check out this code snippet: Apple defines its function using a prototype. Banana defines its function using a class property. var Apple = function(){} Apple.prototype.say = function(){ console.debug('HelloWorld'); } var Banana = functio ...

javascriptprototype

Creating a PHP Class for Converting CSS3 Rules to Ensure Compatibility Across Different Browsers

Seeking assistance with developing a class that can process a style sheet, identify browser-specific CSS3 rules, and provide compatibility for all browsers. The goal is to simplify the process of writing styles for one browser and then generating CSS files ...

phpcsscross-browser

Utilizing the Jquery click function to assign an element as a variable

I'm currently working on a script that aims to extract the inner text of any clicked item with the class "customclass". Keep in mind that this specifically targets anchor elements. However, I've encountered an issue where the individual element ...

javascriptjquery

Radio buttons with multiple levels

Looking to implement a unique two-level radio button feature for a specific option only. Currently, I have written a logic that will display additional radio buttons under the 'Spring' option. However, the issue is that when it's selected, t ...

javascripthtmlangulartypescriptangular6

Disabling Immediate Row Checkbox in Angular Datatable Based on Column Data

Is there a way to prevent the checkbox in a row from being checked based on certain column data? In my datatable, I need to implement a condition where if firstname="Superman", then the checkbox for that particular row should be disabled to preve ...

javascriptjqueryangulardatatablesangular-datatables