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

Error thrown by loader.js at line 582 of internal/modules/cjs/loader.js

Encountered this error message in the console: Error : Cannot find module. The detailed error is provided below. Any suggestions on how to resolve this? internal/modules/cjs/loader.js:582 throw err; ^ Error: Cannot find module 'C:\Users ...

javascriptnode.jsnpm

My goal is to manage components asynchronously in Nuxt.js while also showcasing alert messages

My Desired Outcome I am hoping to implement a notification system that notifies the user based on the response from the server. However, since notifications are handled by a separate component, I need to asynchronously call this component in my code. The ...

javascriptvue.jsnuxt.js

The Selenium python tool is reporting that the element at coordinates (X, Y) is not clickable, as another element is blocking it from receiving the click. It's important to note that

Here is a link to an online store that I need to extract information from. Specifically, I am looking to access the Most Helpful, positive, negative, most recent, and certified buyers' sections in order to scrape the values within them. Unfortunately, ...

pythonhtmlseleniumxpath

What is causing the TypeScript error in the MUI Autocomplete example?

I am attempting to implement a MUI Autocomplete component (v5.11) using the example shown in this link: import * as React from 'react'; import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autoco ...

javascriptreactjstypescriptmaterial-ui

Filter object in Angular to remove empty values

Below are the specific data sets: $scope.icons = [{ "id": 1, "bonuses": [ { "id": 1, "name": "Rob", "amount": 10, "foreman": 1, "percA": 1, "percB": 0 }, { "id": 2, "name": "Mark", "amount": 20, "foreman": 1, "percA": 1, "percB": 0 }, ] }, { ...

javascriptangularjs

"Enhance Your Table Design with Zebra Cells Using CSS in rich:data

How can I achieve a zebra color effect in every other cell of a rich:dataTable using CSS? <rich:dataTable value="#{uploader.files}" var="_data" id="files"> <rich:column> <f:facet name="header"> <h:outputText ...

javacssdatatablerichfaces

Tips for including a currency symbol before an input field using Material UI

Trying to add a dollar sign to the left of an input field using InputAdornment but it's not displaying correctly. Check out my code here: https://codesandbox.io/s/material-demo-wnei9?file=/demo.js ...

javascriptreactjsmaterial-ui

What is the name of the JavaScript code editor that includes line numbering for plain text?

Looking to incorporate a text area with line numbering features. I experimented with EditArea, but encountered difficulties when working with text files. While syntax highlighting for various programming languages would be a nice touch, my primary focus ...

javascripteditorwysiwygline-numbersplaintext

Using JQuery to locate radio buttons that have been selected based on a variable

In my JavaScript code, I have created a variable called "thisRadio" to represent a dynamically generated div containing multiple radio buttons. Currently, one of these radio buttons may be checked and my goal is to find the checked radio button within this ...

htmljqueryradio-button

What is the best way to reset the 3rd dynamic dropdown menu once a new selection is made in the 1st dropdown menu?

I have been working on creating a dynamic dropdown using Jquery ajax and json in js. Almost everything is working as expected, except for one issue that I am facing. The problem arises when I select an option in dropdown A, which then loads items into drop ...

javascriptjqueryhtmljsonajax

The Express.js application functions properly on a local environment, but encounters issues when deployed on Heroku

Currently, I am experiencing an issue with deploying a music visualizer that I created. It seems to work perfectly in all scenarios except when I click on a song to play from the search bar, where I keep encountering a '503 (Service Unavailable)' ...

javascriptnode.jsexpressheroku

Ways to display URL parameters on an HTML page without using PHP

I'm currently working on a website using HTML (without PHP) and I'm facing an issue with displaying URL parameters on an appointment confirmation page. The appointment details are being successfully passed through the URL parameters, but I'm ...

javascripthtmlparameters

Is it possible to execute Ajax insertions in the right sequence without relying on async:false?

My ASP.Net MVC page contains an AJAX form that allows users to submit data manually or copy large amounts of data for submission at once using JavaScript. @using (Ajax.BeginForm("action", "controller", new AjaxOptions { HttpMethod = "POST", ...

javascriptjqueryasp.net

Remove a specific line from a PHP script

I have developed a system of alerts that allows users to delete an alert if they choose to do so. Below is the code for the delete button and table: <button type="button" name="Delete" Onclick="if(confirm('Are you sure you ...

phpjquerycssajaxhtml-table

Angular - developing a custom web element to enhance the project

Is there a way to convert a single module into a web component and integrate it within the same project? Specifically, I have 3 modules in my project and I am looking to transform only module1 into a web component and incorporate it seamlessly. Thank you! ...

javascripthtmlangulartypescriptweb-component

How can I adjust the time in a range slider using AngularJS?

Currently, I am utilizing a Slider with draggable range in angular js for time selection. The Slider can be found here: https://jsfiddle.net/ValentinH/954eve2L/. I aim to configure the time on this slider to span from 00.00 to 24.00, with a 10-minute inter ...

javascriptjqueryangularjsrangeslider

Having trouble with ejs.filters?

I'm having trouble grasping ejs filters and getting them to work correctly: Server.js var ejs = require('ejs'); ejs.filters.example = function() { //placeholder for example }; Routes.js app.get('/home', function(req, res) { ...

javascriptnode.jsexpressejs

"Creating a 2-column layout for an unordered list using CSS Flex

After spending far too much time at work today pondering this issue, I've decided to turn to the collective wisdom of the internet. My dilemma involves a standard <ul> containing multiple <li> elements (currently 12, but this number could ...

htmlcssflexboxcss-grid

Extract information from a webpage using JavaScript through the R programming language

Having just started learning about web scraping in R, I've encountered an issue with websites that utilize javascript. My attempt to scrape data from a specific webpage has been unsuccessful due to the presence of javascript links blocking access to t ...

javascripthtmlrweb-scraping

Preventing Duplicate Submissions with the jQuery Form Plugin

While there are several discussions on this topic at SO, none seem to cover the amazing jQuery Form plugin that I heavily utilize in my application. I am looking to allow the user to only click 'submit' once and then disable the button until an ...

javascriptjqueryjquery-forms-plugin