# jquery-duplicate-fields

> jQuery plugin for Dynamically Adding Form Elements

Latest version **1.1.1** (published 2025-05-19) · GPL-3.0-or-later license · 0 weekly downloads

## Install

```sh
npm install jquery-duplicate-fields
pnpm add jquery-duplicate-fields
yarn add jquery-duplicate-fields
bun add jquery-duplicate-fields
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2025-05-19 |
| First published | 2022-05-19 |
| Weekly downloads | 0 |
| License | GPL-3.0-or-later |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 42.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | iatanasov77 |
| Maintainers | iatanasov77 |
| Keywords | jquery, duplicate, fields |

## Links

- npm: https://www.npmjs.com/package/jquery-duplicate-fields
- Repository: https://github.com/iatanasov77/jquery-duplicate-fields
- Homepage: https://github.com/iatanasov77/jquery-duplicate-fields#readme
- Issues: https://github.com/iatanasov77/jquery-duplicate-fields/issues
- npm.io page: https://npm.io/package/jquery-duplicate-fields

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2025-05-19
- 1.1.0 — 2023-09-10
- 1.0.1 — 2023-09-10
- 1.0.0 — 2022-05-19
- 0.0.5 — 2022-05-19

## README

# jquery-duplicate-fields
jQuery plugin for Dynamically Adding Form Elements

## I. Usage
1. Create the Container
    ```
    <div id="ContainerId"
        data-prototype="<div class="row ">
                            <div class="col-lg-10 mb-3">                                
                                <input type="text" />
                            </div>
                            <div class="col-lg-2  mb-3">
                                <a href="javascript:void(0);" class="btn btn-success btnAddField"><i class="icon_plus_alt2"></i></a>
                                <a href="javascript:void(0);" class="btn btn-danger btnRemoveField"><i class="icon_close_alt2"></i></a>
                            </div>
                        </div>"
    ></div>
    ```

2. Simple Initialize Container
    ```
    $( '#ContainerId' ).duplicateFields({
        btnRemoveSelector: ".btnRemoveField",
        btnAddSelector:    ".btnAddField"
    });
    ```

3. Initialize Container with callback 'onCreate'
    ```
    $( '#ContainerId' ).duplicateFields({
        btnRemoveSelector: ".btnRemoveField",
        btnAddSelector:    ".btnAddField",
        onCreate: function( newElement ) {
            let fileInputId = newElement.find( '.fieldClass' ).attr( 'id' );
            newElement.find( '.input-group-text' ).attr( 'for', fileInputId );
        }
    });
    ```

# II. Commands to publish Package
1. Login Into NPM Registry
    ```
    export NPM_USERNAME=myusername
    export NPM_PASSWORD=mypassword
    export NPM_EMAIL=user@domain.com
    npm adduser<<!
    $NPM_USERNAME
    $NPM_PASSWORD
    $NPM_EMAIL
    !
    ```
2. Publish Package
    ```
    npm publish
    ```

---
_Source: https://npm.io/package/jquery-duplicate-fields · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._