gistfile1.js

//requires https://github.com/janl/mustache.js
//requires jQuery

if (typeof $jq === 'undefined') $jq = {};

$( document ).ready(function(){
	$( '[jq-repeat]' ).each(function(key, value){
		var $this = $(value);
		var repeatId = $this.attr('jq-repeat') ;
		var tempId = repeatId + 'Template';
		var templateId = $( '#' + tempId ).html();

		if(!$jq[repeatId] && typeof $jq[repeatId] != 'array') $jq[repeatId] = [];

		$this.removeAttr('jq-repeat');
		$this.wrap( '<script type="x-tmpl-mustache" id="' + tempId + '" class="jq-repeat-' + repeatId + ' " jq-repeat-index="holder"><\/script>' );
		
		Mustache.parse(templateId);   // optional, speeds up future uses

		var tempArray = $jq[repeatId].splice(0);

		$jq[repeatId].push = function (){
			var index = $jq[repeatId].length;
			var template = $(document.getElementById( repeatId + 'Template').outerHTML);
			var render = Mustache.render( template.html(), arguments[0] );
			render = $( render ).addClass( 'jq-repeat-'+ repeatId ).attr( 'jq-repeat-index', index );
			
			$('.jq-repeat-'+ repeatId).last().after( render );
			return Array.prototype.push.apply( this, arguments );
		};
		
		$.each(tempArray, function(key, value){
			$jq[repeatId].push(value)
		});

		$jq[repeatId].pop = function(){
			var index = this.length -1;
			$( '.jq-repeat-'+ repeatId +'[jq-repeat-index="'+index+'"]' ).remove();
			return Array.prototype.pop.apply( this );
		};

		$jq[repeatId].splice = function(){
			var index = arguments[0]; //set where to start
			var howMany = arguments[1]; //sets the amount of fields to remove
			var args = Array.prototype.slice.call( arguments ); // coverts arguments into array 
			var toAdd = args.slice(2); // only keeps fields to add to array

			console.log(this);

			// if the starting point id higher then the total index count, start at the end
			if( index > this.length ) index = this.length;
			// if the starting point is negative, start form the end of the array, minus the start point
			if( index < 0 ) index = this.length - Math.abs( index );
			console.log('Starting Point: ' + index);
			// if th
			if( !howMany && howMany != 0 ) howMany = this.length - index;
			if( howMany > this.length - index ) howMany = this.length - index;
			console.log('howMany: ' + howMany);

			var shift = toAdd.length - howMany;
			console.log('shift: ' + shift)

			var newLength = this.length + shift;
			console.log(newLength);

			//removes fields from array based on howMany //works
			for ( var i = 0; i < howMany; i++ ) {
				$( '.jq-repeat-'+ repeatId +'[jq-repeat-index="'+ ( i + index ) +'"]' ).remove();
				console.log('removed index: ' + ( i + index ));
			}

			//re-factor element index's

			/*if(shift > 0){
				for( var i = 0 ; i < shift; i++){
					workingIndex = i+index+shift;
					console.log('workingIndex: ' + workingIndex);
					$('.jq-repeat-'+ repeatId +'[jq-repeat-index="'+ workingIndex +'"]'  ).attr( 'jq-repeat-index', (workingIndex + shift) );
					console.log('Old index: ' + workingIndex + ' New index: ' + (workingIndex + shift) );
				}
			}*/
			
				$( '.jq-repeat-'+ repeatId+'[jq-repeat-index!="holder"]' ).each(function( element ){
					var thisIndex = Number($(this).attr('jq-repeat-index'));
					console.log('thisIndex: ' + thisIndex);
					if(  thisIndex >= index){
						$( this ).attr( 'jq-repeat-index', thisIndex+shift );
					}
				});


			//if there are fields to add to the array, add them
			if(toAdd.length > 0){

				//re-factor index keys for shifter elemetns 
				$.each(toAdd, function( key, value ){
					var key = key + index

					var template = $(document.getElementById( repeatId + 'Template').outerHTML);
					var render = Mustache.render( template.html(), value );

					render = $( render ).addClass( 'jq-repeat-'+ repeatId ).attr( 'jq-repeat-index', key );
					
					if(key === 0){
						$( '.jq-repeat-'+ repeatId +'[jq-repeat-index="holder"]' ).after( render );
					}else{
						$( '.jq-repeat-'+ repeatId +'[jq-repeat-index="' + ( key -1 ) + '"]' ).after( render );
					}
					console.log("Added item: " + value)
				});
			}

			return Array.prototype.splice.apply( this, arguments );
		};//slice()
	});//jq-repeat
});//doc ready