How Do I Create A Button That Allows A User To Traverse Forward Through Recent Data Input By The User?

I want to have 3 buttons, Add Entry Button - This button creates a New Input box, to add onto previously created input boxes. Edit Previous Button - After creating the New Input b

Solution 1:

This should work.

var input, inputCount = 0;

function newInput() {
  $('#box > input').hide();
  inputCount++;
  input = $('<input>')
    .attr({
      'type': 'text',
      'placeholder': 'Entry_' + inputCount,
      'data-id': inputCount
    })
    .appendTo($('#box'));
}

function editPreviousEntry() {
  var cId = $('#box > input:visible').data('id');

  if (cId - 1 !== 0) {
    $('#box > input').hide();
    $('#box > input:nth-child(' + (cId - 1) + ')').show();
  }
  $('#box > input:nth-child(' + inputCount + ')').hide();
}

function editNextEntry() {
    var cId = $('#box > input:visible').data('id');

    if (cId + 1 <= inputCount) {
        $('#box > input').hide();
        $('#box > input:nth-child(' + (cId + 1) + ')').show();
    }
}

input {
  display: block;
  margin-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" onclick="newInput()">Add Entry</button>
<button id="edit" onclick="editPreviousEntry()">Edit Previous Entry</button>
<button id="edit" onclick="editNextEntry()">Edit NExt Entry</button>
<br/>

<br/><span id="box"></span>
<br/>