tengo un problema con lo siguiente. Resulta que quiero crear elementos input dependientes de una cantidad seleccionada en un select-option. Por ejemplo si se selecciona un valor del select como 3, crear esos 3 input y asi sucesivamente. hasta ahora tengo lo siguiente:
Una función que obtiene los valores y una variable con los input que debo de poner

    function showInput() {
		getSelectElement = document.getElementById("vias").value;
		if (getSelectElement == 0) {
			alert("Seleccione un numero válido");
		}else{

			construirInput = 1;
			while( construirInput <= getSelectElement){
				colocar = "<div class='col-md-4 col-sm-4 col-xs-10 '><label class='form-check-label'>Calle</label><input class='form-control' type='text' placeholder='Ingresar Calle' name='calle'></div><div class='col-md-3 col-sm-3 col-xs-10 '><label class='form-check-label'>Por calle</label><input class='form-control' type='text' placeholder='Por Calle' name='cruceA[]'></div><div class='col-md-3 col-sm-3 col-xs-10 '><label class='form-check-label'>Y</label><input class='form-control' type='text' placeholder='Y' name='cruceB[]'></div>";

				$('#ubicacion').html(colocar);
				construirInput++;
			}
			
		}
	}

mientras que los select están enumerados del uno al 10 como:

    <select name="vias" id="vias" class="form-control" onchange="showInput()">
		<option value="0">Selecciona</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
		<option value="6">6</option>
		<option value="7">7</option>
		<option value="8">8</option>
		<option value="9">9</option>
		<option value="10">10</option>
	</select>

para colocarlo solo un div con un ID = "ubicacion". Pueden ayudarme con esto...