Jquery function wont run twice

Question

I use the code below to submit a form to a PHP file, the php file will return success, 10, or other values. If the response is successful the form is hidden and #sms-again is displayed instead. The user is asked if they want to submit the from again, when this is selected the from will be displayed again. If the user submits the form successfully again for some reason #sms-again fails to show even though it receives the response and hides the form. I really don't understand what is going on.

$('form.ajax').on('submit', function(){

    $('#sms-submit').prop('disabled', true).html("<i class='fa fa-circle-o-notch fa-spin'></i>");

      var that = $(this),
        url = that.attr('action'),
        type = that.attr('method'),
        data = {};

      that.find('[name]').each(function(index, value){
        var that = $(this),
        name = that.attr('name'),
        value = that.val();
        data[name] = value;

      });

      $.ajax({
        url: url,
        type: type,
        data: data,
        success: function( data, textStatus, jQxhr ){
          if(data == 'success') {
              $('#sms-send').fadeOut('fast', function(){
              $('#sms-submit').prop('disabled', false).html("Send link <i class='fa fa-paper-plane'>");
              $('#sms-response').html("<p>Good <a id='sms-again' class='again' href='#'>Send another?</a></p>");

              });
            }
            else if (data == '10') {
                $('#sms-response').html("<p>Bad</p>");
                $('#sms-submit').prop('disabled', false).html("Send link <i class='fa fa-paper-plane'>");
              }

            else {
                $('#sms-submit').prop('disabled', false).html("Send link <i class='fa fa-paper-plane'>");
                $('#sms-response').html("<p>Must be something else</p>");
              }
            },

        error: function( jqXhr, textStatus, errorThrown ){
                console.log( errorThrown );
          },
      });
    return false;
  });

  $("#sms-response").on('click','#sms-again', function() {
    event.preventDefault();
    $('#sms-send').show();
    $('#sms-response').hide();
  });

Answer 1

  $("#sms-response").on('click','#sms-again', function() {
    event.preventDefault();
    $('#sms-send').show();
    $('#sms-response').hide();
  });

You are hiding sms-response here and you need to show this below here. use the jquery show()

if(data == 'success') {
              $('#sms-send').fadeOut('fast', function(){
              $('#sms-submit').prop('disabled', false).html("Send link <i class='fa fa-paper-plane'>");
              $('#sms-response').html("<p>Good <a id='sms-again' class='again' href='#'>Send another?</a></p>").show();

              });
            }