Trouble with getting right value from html input using jquery

Question

I have this at the end of my PHP file:

<script type="text/javascript>"
$("#id").on("click", "#otherId", function(e)
{
  var html = "<input class='id' type='text' size='5' />";
  var row = $(this).closest("#addoid").html(html);
  row.find("input").focus();

  row.find('input').change( function(e)
  {
    var value = $(this).val();
    var fid = $("input#idName").val();
    $.ajax({
      type: "POST",
      url: "page.php",
      data: { entryId: fid, val: value }
    })
    .done(function( msg ) { 
      alter("data: " + msg);
    });
   });
</script>
</body>

The html is something like this:

<div id="id">
  <div id="otherId">
    <input id="idName" type="hidden" value="1234" />
    <button type="button" id="otherId">Add</button>
  </div>
  <div id="otherId">
    <input id="idName" type="hidden" value="1235" />
    <button type="button" id="otherId">Add</button>
  </div>
  <div id="otherId">
    <input id="idName" type="hidden" value="1236" />
    <button type="button" id="otherId">Add</button>
  </div>
</div>

I left the earlier jquery code out, but basically, when the Add button is pressed, it is changed to an input field, if the user puts an id into the input field, it will display a link (on blur) or go back to the add button if nothing is entered.

So far it is working, however

var fid = $("input#idName").val();

is taking the next id (instead of 1234, it is posting 1235).

I am new to jquery. I have searched around and tried several different things but I am getting nowhere.

Thanks.

---

ADDITION

To make this more clear, I have a table that is being populated with a foreach loop (using php) it is pulling records from a database.

looks something like this:

<div id="list">
<table>
  <?php foreach ($data as $value):?>
  <tr>
  <td>
    <div class="row">
      <button class="add">Add</button>
      <input class="hiddenId" type="hidden" name="hiddenName" value="<?php echo $value['id']?>" />
    </div>
  </td>
  </tr>
  <?php endforeach?>
</table>
</div>

Like I explained earlier, when the "Add" button is clicked, it turns into an input field.

On change (of the input field), I need the ajax to send a request containing the values of the two input fields.

The problem I am having is I am not able to get the correct value of the hidden input. jquery is grabbing a value from another row, not the correct row.

I can't seem to figure this out and have honestly tried many different ways, including some that would probably be considered unconventional.

Thanks for any help.

Answer 1

请先重命名输入ID，因为ID必须是唯一的。