show the html div id and rearrange the rest

Question

i have 5 divs , with different id's. I want to make a step formation like if i get the value(from url) measures example:

, it shows me the first div with id measures and rearrange the rest of the divs including fabrics which exists before measures div and so on

Then after, when i click the Next button it shows me the rearranged div one by one.

I have done this whole code using php and jquery.

Is it possible to do this using jquery or javascript or anything, Please help me to fix this.

Thanks in advance.

my Code is

var navListItems = $('div.setup-panel div a'),
	allWells = $('.setup-content'),
	allNextBtn = $('.nextBtn'),
	allPrevBtn = $('.prevBtn');


	allWells.hide();

	navListItems.click(function (e) {
	e.preventDefault();
	var $target = $($(this).attr('href')),
	$item = $(this);

	if (!$item.hasClass('disabled')) {
	navListItems.removeClass('btn-primary').addClass('btn-success');

	$item.addClass('btn-primary');

	allWells.hide();
	$target.show();
	$target.find('input:eq(0)').focus();
	}
	});

	allPrevBtn.click(function(){
	var curStep = $(this).closest(".setup-content"),
	curStepBtn = curStep.attr("id"),
	prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");

	prevStepWizard.removeAttr('disabled').trigger('click');
	});

	allNextBtn.click(function(){
	var curStep = $(this).closest(".setup-content"),
	curStepBtn = curStep.attr("id"),
	nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
	curInputs = curStep.find("input[type='text'],input[type='url']"),
	isValid = permission;



	$(".form-group").removeClass("has-error");
	for(var i=0; i<curInputs.length; i++){
	if (!curInputs[i].validity.valid){
	isValid = false;
	$(curInputs[i]).closest(".form-group").addClass("has-error");
	}
	}

	if (isValid)
	nextStepWizard.removeAttr('disabled').trigger('click');
	});

	$('div.setup-panel div a.btn-primary').trigger('click');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row setup-content" id="step-1">		// i will change it's id to fabrics
		<button class="btn btn-primary nextBtn btn-lg pull-right btn-xs fabric_button" id="fabric"> Next </button>
	</div>
	<div class="row setup-content" id="step-2" >	// i will change it's id to patterns
		<button class="btn btn-primary nextBtn btn-lg pull-right btn-xs" type="button" id="pattern" >Next</button>
	</div>
	<div class="row setup-content" id="step-3" >	// i will change it's id to measures
		<button class="btn btn-primary nextBtn btn-lg pull-right btn-xs" type="button" id="pattern" >Next</button>
	</div>
	<div class="row setup-content" id="step-4" >	// i will change it's id to Pair
		<button class="btn btn-primary nextBtn btn-lg pull-right btn-xs" type="button" id="pattern" >Next</button>
	</div>
	<div class="row setup-content" id="step-5" >	// i will change it's id to total
		<button class="btn btn-primary nextBtn btn-lg pull-right btn-xs" type="button" id="pattern" >Next</button>
	</div>