Input-group-btn not showing up after adding JQuery to file

Question

Here is what I am doing.

• Creating a Modal that allows users to input a password
• There will be a button to the right of the password field that allows you to show/hide the text in the field.

Here is what I have so far. My example works perfect.

• http://jsfiddle.net/5wzs0njf/1/

This is my html code:

<div class="input-group col-md-8 col-md-offset-2">
     <input type="password" class="form-control" id="password" placeholder="Password">
     <span class="input-group-btn">
        <button type="button" id="passwordButton" class="btn btn-primary">Show</button>
      </span>
</div> 

This is my query function:

<script>
$(function () {
$(".form-control").each(function (index, input) {
var $input = $(input);
$("#passwordButton").click(function () {
  var change = "";
  if ($(this).html() === "Show") {
    $(this).html("Hide");
    change = "text";
  } else {
    $(this).html("Show");
    change = "password";
  }
  var rep = $("<input type='" + change + "' />")
    .attr("id", $input.attr("id"))
    .attr("name", $input.attr("name"))
    .attr('class', $input.attr('class'))
    .val($input.val())
    .insertBefore($input);
  $input.remove();
  $input = rep;
}).insertAfter($input);
});
});
</script>

However, when I add my jquery to my file at the bottom, my button disappears. This is what it should look like (the way it looks before I add my jquery)

This is how it looks after.

Is there something I am doing wrong that I am missing? I have tried to format this into a very easy to read/understand question.

Answer 1

There is a functional error in your code. In your code

$("#passwordButton").click(function () {
  var change = "";
  .....
}).insertAfter($input);

You don't need this insertAfter() function because you have already changed the name of the button. Just remove that function as

$("#passwordButton").click(function () {
  var change = "";
  .....
});

Now your code must work just fine.