{"id":32233957,"url":"https://github.com/lienoil/jquery-cloner","last_synced_at":"2026-03-13T14:32:22.260Z","repository":{"id":48018912,"uuid":"74551749","full_name":"lienoil/jquery-cloner","owner":"lienoil","description":"A jQuery plugin to clone HTML content","archived":false,"fork":false,"pushed_at":"2022-12-06T16:43:02.000Z","size":970,"stargazers_count":13,"open_issues_count":5,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-01-12T18:53:30.534Z","etag":null,"topics":["clonable-elements","decrement","increment","jquery","jquery-cloner","jquery-plugin"],"latest_commit_sha":null,"homepage":"https://lienoil.github.io/jquery-cloner/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lienoil.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-23T07:32:05.000Z","updated_at":"2024-01-06T15:54:24.000Z","dependencies_parsed_at":"2022-08-12T16:50:26.665Z","dependency_job_id":null,"html_url":"https://github.com/lienoil/jquery-cloner","commit_stats":null,"previous_names":["lioneil/jquery-cloner"],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/lienoil/jquery-cloner","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lienoil%2Fjquery-cloner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lienoil%2Fjquery-cloner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lienoil%2Fjquery-cloner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lienoil%2Fjquery-cloner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lienoil","download_url":"https://codeload.github.com/lienoil/jquery-cloner/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lienoil%2Fjquery-cloner/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30468302,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-13T11:00:43.441Z","status":"ssl_error","status_checked_at":"2026-03-13T11:00:23.173Z","response_time":60,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clonable-elements","decrement","increment","jquery","jquery-cloner","jquery-plugin"],"created_at":"2025-10-22T12:43:29.882Z","updated_at":"2026-03-13T14:32:22.231Z","avatar_url":"https://github.com/lienoil.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jQuery Cloner\nA jQuery plugin to clone HTML content\n\n## Getting Started\nThis guide will help you install and use jQuery Cloner. See deployment for notes on how to deploy this plugin on frontend development on a live website.\n\n### Installation\nvia bower:\n```\nbower install jquery-cloner\n```\n\nvia npm:\n```\nnpm install jquery-cloner\n```\n\nor download or clone (pun!) on [GitHub](https://github.com/lioneil/jquery-cloner).\n\n\n### Usage\njQuery Cloner relies on classes and attributes to work.\n\nA simple sample markup:\n\n```html\n\u003c!-- initialize jQuery-Cloner via the `data-toggle=cloner` attribute --\u003e\n\u003cdiv class=\"clonable-block\" data-toggle=\"cloner\"\u003e\n    \u003cdiv class=\"clonable\" data-clone-number=\"1\"\u003e\n        \u003clabel for=\"attr_1\" class=\"clonable-increment-for\"\u003eAttribute \u003cspan class=\"clonable-increment-html\"\u003e1\u003c/span\u003e\u003c/label\u003e\n\t\t\u003cinput id=\"attr_1\" class=\"clonable-increment-id clonable-increment-name\" type=\"text\" name=\"attr[0]\"\u003e\n\t\t\u003cbutton type=\"button\" class=\"clonable-button-close\"\u003eDelete\u003c/button\u003e\n    \u003c/div\u003e\n    \u003cbutton class=\"clonable-button-add\" type=\"button\"\u003eAdd Attributes\u003c/button\u003e\n\u003c/div\u003e\n\n\u003c!-- jQuery is, of course, a dependency --\u003e\n\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js\"\u003e\u003c/script\u003e\n\u003c!-- Our main man here --\u003e\n\u003cscript src=\"jquery-cloner/dist/jquery-cloner.min.js\"\u003e\u003c/script\u003e\n```\nIn the example above, the ```data-toggle=\"cloner\"``` will automatically initialize our HTML.\n\nManual initialization, then, is as easy as:\n\n```\n// main.js\n(function ($) {\n    $('#my-clonable-block').cloner();\n})(jQuery);\n```\n### Options\nThe plugin have options you can modify. Below is the list of options with their default values:\n\n```\n$('#my-clonable-block').cloner({\n    clonableContainer: '.clonable-block',\n    clonable: '.clonable',\n    addButton: '.clonable-button-add',\n    closeButton: '.clonable-button-close',\n    focusableElement: ':input:visible:enabled:first',\n\n    clearValueOnClone: true,\n    removeNestedClonablesOnClone: true,\n    limitCloneNumbers: true,\n\n    debug: false,\n\n    cloneName: 'clonable-clone',\n    sourceName: 'clonable-source',\n\n    incrementName: 'clonable-increment',\n    decrementName: 'clonable-decrement',\n});\n```\n\n**clonableContainer** - The class that should contain all our clonable elements, including the Add Button\n\n**clonable** - The class of the clonable element. This is the html chunk that will be repeated.\n\n**addButton** - The class of the button that will fire the `toggle` method, prompting the cloning action.\n\n**closeButton** - The class of the button that will fire the `remove` method, prompting to remove the clonable element. *Important*: this element should be inside a `clonable` element.\n\n**focusableElement** - The attribute or input tag inside a newly cloned `clonable` to place the cursor over.\n\n**clearValueOnClone** - The plugin will clone the last instance of the `clonable` class. This option will toggle to remove or retain all previous input values.\n\n**removeNestedClonablesOnClone** - Toggle to remove all clone instances of the `clonableContainer`.\n\n**limitCloneNumbers** - Will only work for decrementing `clonables`.\n\n**debug** - Switch `console.log`ging on/off.\n\n**incrementName** - this option will increment all values inside a `clonable`. It uses suffixes (html, value, and any attribute like class, id, etc.) to know which integers will be incremented.\nTake the below as an example:\n\n```\n\u003cinput id=\"attr_1\" class=\"clonable-increment-id clonable-increment-name\" type=\"text\" name=\"attr[0]\"\u003e\n```\n\nIn this example, we have classes of `clonable-increment`s with suffixes `-id` and `-name` which corresponds with the `input tag's` `id=attr_1` and `name=\"attr[0]\"`. Performing a clone, therefore will result in\n\n\n```\n\u003cinput id=\"attr_1\" class=\"clonable-increment-id clonable-increment-name\" type=\"text\" name=\"attr[0]\"\u003e\n\u003cinput id=\"attr_2\" class=\"clonable-increment-id clonable-increment-name\" type=\"text\" name=\"attr[1]\"\u003e\n```\nIt does this using `regex`.\n\n**decrementName** - The reverse of increment.\n\n**beforeToggle** - this is a function callback you can hook into before the `cloning` action is fired. It accepts parameters `$clone`( the clone of the last `clonable`), `index` (the `clonables`' length), and `self` (a catch-all reference of the jQuery-Cloner itself). An example use case:\n```\n$('#my-clonable-block').cloner({\n    beforeToggle: function ($clone, i, self) {\n        // console.log(self);\n\t\tvar $container = self.$container;\n\t\tif ($clone.find('input:last').val() == \"\") {\n\t\t    $container.css({border:'1px solid red'});\n\t\t} else {\n\t\t\t$container.css({border:'none'});\n\t\t}\n    },\n});\n```\n\n**afterToggle** - this will fire after the `cloning` action is triggered.\n\n\n### Deployment\nCopy the /dist/\\*.js folder to your project\n\n\n### Versioning\nThe project uses SemVer for versioning. For the versions available, see the tags on this repository.\n\n\n### Authors\n* John Lioneil Dionisio\n\nSee also the list of [contributors](#) who participated in this project.\n\n\n### License\n[MIT License](https://raw.githubusercontent.com/lioneil/jquery-cloner/master/LICENSE)\n\n\n\n### Acknowledgment\n* Andrey Mikhaylov (aka lolmaus) for his [jquery.closestchild](https://github.com/lolmaus/jquery.closestchild)\n* Everyone over at [stackoverflow](http://stackoverflow.com/tags/jquery), and other various resources.\n* to the Muses of Inspiration","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flienoil%2Fjquery-cloner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flienoil%2Fjquery-cloner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flienoil%2Fjquery-cloner/lists"}