kswedberg/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <form action="?">
    <div class="user">
      <input id="user" name="user" type="text" placeholder="user">
    </div>
    <div class="password">
      <input id="password" name="password" type="password" placeholder="password">
    </div>
  </form>
  <p>
    <button id="replace">Replace Inputs</button>
  </p>
<script id="jsbin-javascript">
var btn = document.getElementById('replace');
var i = 0;

var replaceInputs = function replaceInputs() {
  var inputs = {
    user: 'text',
    password: 'password'
  };

  i++;

  Object.keys(inputs).forEach(function(id) {
    var el = document.getElementById(id);
    var div = document.getElementsByClassName(id)[0];

    div.removeChild(el);
    el = document.createElement('input');
    el.name = id;
    el.placeholder = id + i;
    el.id = id;
    el.type = inputs[id];
    div.appendChild(el);
    div = el = null;

  });
};

btn.addEventListener('click', replaceInputs, false);
</script>


<script id="jsbin-source-javascript" type="text/javascript">var btn = document.getElementById('replace');
var i = 0;

var replaceInputs = function replaceInputs() {
  var inputs = {
    user: 'text',
    password: 'password'
  };

  i++;

  Object.keys(inputs).forEach(function(id) {
    var el = document.getElementById(id);
    var div = document.getElementsByClassName(id)[0];

    div.removeChild(el);
    el = document.createElement('input');
    el.name = id;
    el.placeholder = id + i;
    el.id = id;
    el.type = inputs[id];
    div.appendChild(el);
    div = el = null;

  });
};

btn.addEventListener('click', replaceInputs, false);</script></body>
</html>

## jsbin.xonicozowe.js
var btn = document.getElementById('replace');
var i = 0;

var replaceInputs = function replaceInputs() {
  var inputs = {
    user: 'text',
    password: 'password'
  };

  i++;

  Object.keys(inputs).forEach(function(id) {
    var el = document.getElementById(id);
    var div = document.getElementsByClassName(id)[0];

    div.removeChild(el);
    el = document.createElement('input');
    el.name = id;
    el.placeholder = id + i;
    el.id = id;
    el.type = inputs[id];
    div.appendChild(el);
    div = el = null;

  });
};

btn.addEventListener('click', replaceInputs, false);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<form action="?">
	<div class="user">
	<input id="user" name="user" type="text" placeholder="user">
	</div>
	<div class="password">
	<input id="password" name="password" type="password" placeholder="password">
	</div>
	</form>
	<p>
	<button id="replace">Replace Inputs</button>
	</p>
	<script id="jsbin-javascript">
	var btn = document.getElementById('replace');
	var i = 0;

	var replaceInputs = function replaceInputs() {
	var inputs = {
	user: 'text',
	password: 'password'
	};

	i++;

	Object.keys(inputs).forEach(function(id) {
	var el = document.getElementById(id);
	var div = document.getElementsByClassName(id)[0];

	div.removeChild(el);
	el = document.createElement('input');
	el.name = id;
	el.placeholder = id + i;
	el.id = id;
	el.type = inputs[id];
	div.appendChild(el);
	div = el = null;

	});
	};

	btn.addEventListener('click', replaceInputs, false);
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">var btn = document.getElementById('replace');
	var i = 0;

	var replaceInputs = function replaceInputs() {
	var inputs = {
	user: 'text',
	password: 'password'
	};

	i++;

	Object.keys(inputs).forEach(function(id) {
	var el = document.getElementById(id);
	var div = document.getElementsByClassName(id)[0];

	div.removeChild(el);
	el = document.createElement('input');
	el.name = id;
	el.placeholder = id + i;
	el.id = id;
	el.type = inputs[id];
	div.appendChild(el);
	div = el = null;

	});
	};

	btn.addEventListener('click', replaceInputs, false);</script></body>
	</html>