== Inline Script Block
Line: 36
----
<script>
		// handle a single button
		function handleOne(button,loading) {
			// jelly represents each item as a div with class "tr" with data inside
			var parent = button.closest('.tr');

			if (!parent) return false;

			// the containers will also contain the setting name
			var repeatableContainer = parent.getElementsByClassName('repeated-container')[0];

			if (!repeatableContainer) return false;

			// find all the settings that have our custom class
			// as we do not want to change the normal behaviour
			var settings = repeatableContainer.getElementsByClassName("environment-title");

			// add an integer number to each custom setting item
			for (var i = 0; i &lt; settings.length; i++) {
				settings[i].innerHTML = settings[i].title + (loading ? i : i + 1);
			}
		}

		// handle all the custom repeatable's on the current page
		function setNames(loading) {
			var buttons = document.getElementsByName('customRepeatableButton');
			for(var i = 0; i &lt; buttons.length; i++) {
				handleOne(buttons[i],loading);
			}
		}

		document.addEventListener('DOMContentLoaded', function() {
			setNames(true);
		}, false);

	</script>
----

== Inline Event Handler
Line: 126
----
<input type="button" value="${attrs.add?:'%Add'}" class="repeatable-add"
						   onClick="setNames(false)" name="${buttonName}"
						   style="color:black; background-color: rgb(229,241,252);"/>
----

== Inline Event Handler
Line: 131
----
<input type="button" value="${attrs.add?:'%Add'}" class="repeatable-add"
						   onClick="setNames(false)" name="${buttonName}"/>
----