Element doesn't show after changing it's id

Question

I have a form that allows a user to click an "add" button in order to display more form fields. Then, the id is changed so that when the user clicks again, a different set of form fields appear. The first instance works as expected, however, I cannot get the second set of fields to appear. I'm new to JS so I'm not quite sure what I am missing here. Thanks!

HTML:

<p>
 <table>
  <tr>
<td width="250px">
  Shipping Method
</td>
<td>
  <select name="shipmeth_id">
   <option value="1">UPS</option>
   <option value="2">FedEx</option>
  </select>
</td>
  </tr>
  <tr>
<td>
 Account Number
</td>
<td>
 <input id="ship_num" name="ship_num" type="text" />
</td>
  </tr>
  <tr>
<td>
  Zip Code
</td>
<td>
  <input id="ship_zip" name="ship_zip" type="text" />
</td>
  </tr>
 </table>
</p>
<p class="extra_ship" style="display:none;">
  <table>
<tr>
  <td width="250px">
    Shipping Method
  </td>
  <td>
    <select name="shipmeth_id2">
      <option value="1">UPS</option>
      <option value="2">FedEx</option>
    </select>
  </td>
</tr>
<tr>
  <td>
    Account Number
  </td>
  <td>
    <input id="ship_num" name="ship_num" type="text" />
  </td>
</tr>
<tr>
  <td>
    Zip Code
  </td>
  <td>
    <input id="ship_zip" name="ship_zip" type="text" />
  </td>
</tr>
  </table>
</p>
<p class="extra_ship2" style="display:none;">
  <table>
<tr>
  <td width="250px">
    Shipping Method
  </td>
  <td>
    <select name="shipmeth_id3">
      <option value="1">UPS</option>
      <option value="2">FedEx</option>
    </select>
  </td>
</tr>
<tr>
  <td>
    Account Number
  </td>
  <td>
    <input id="ship_num" name="ship_num" type="text" />
  </td>
</tr>
<tr>
  <td>
    Zip Code
  </td>
  <td>
    <input id="ship_zip" name="ship_zip" type="text" />
  </td>
</tr>
  </table>
</p>
<p>
  <table>
<tr>
  <td width="250px" style="text-align:right;">
    Add Another Account
  </td>
  <td width="50px">
    &nbsp;
  </td>
  <td>
    <button name="add_ship" value="add" type="button" id="add_1" class="add_button" >
      <img src="img/plus_button.png">
    </button>
  </td>
</tr>
  </table>
</p>

And JS:

<script type="text/javascript">
$('#add_1').click(function() {
    $('.extra_ship').show();
    document.getElementById('add_1').id = 'add_2';
});
$('#add_2').click(function() {
    $('.extra_ship2').show();
});
</script>

Answer 1

You seem to set a click event on a button that yet doesn't exist (add_2).

Try to change this:

$('#add_1').click(function() {
    $('.extra_ship').show();
    document.getElementById('add_1').id = 'add_2';
});
$('#add_2').click(function() {
    $('.extra_ship2').show();
});

To this

$('#add_1').click(function() {
    $('.extra_ship').show();
    document.getElementById('add_1').id = 'add_2';
    $('#add_2').click(function() {
        $('.extra_ship2').show();
    });
});

In this case you could also use a flag:

var isFirst = true;

$('#add_1').click(function() {
    $('.extra_ship').show();

    if (isFirst) {
        //do first thing
        isFirst = !isFirst;
    } else {
        //do second thing
    }
    //isFirst = !isFirst; //toggles here if needed (remove above toggle)

});

Another approach would be to use a counter so for each click you increment the counter and then check conditions based on current count.

Example (this assume a single button - please adopt as needed)

var counter1 = 0; // for many buttons, go for a "class" approach instead

$('#add_1').click(function() {
    $('.extra_ship').show();
    counter1++;

    switch(counter) {
        case 1:
            /* do things */
            break;
        case 2:
            /* do things */
            break;
        default:
            /* reset counter or do other things */
            break;

    }
});

Answer 2

While you could use that setup, just don't change the id. Try using this:

<button name="add_ship" value="add" type="button" id="add_1" class="add_button" data-state="first_step">

Note the data-state="first_step" attribute at the end of the tag.

And:

$('#add_1').click(function() {
    var $this = $(this),
        state = $this.attr("data-state");
    if (state === "first_step") {
        $('.extra_ship').show();
        $this.attr("data-state", "second_step");
    } else if (state === "second_step") {
        $('.extra_ship2').show();
    }
});

Answer 3

Since #add_2 does not exist at DOM ready, you should use .on() to bind the event.

$(document).on('click', '#add_2', function() {
    //do stuff
});