隐藏的输入值，表单循环中的非唯一ID

Question

I'm trying to prep forms with multiple (dynamic) inputs to insert correctly via ajax.

Currently, using my php loop, I have 4 div/forms. Each form has a starting input, and upon clicking the moreItems_add button, it dynamically adds another input, up to 10 per form/div.

This works fine. But I added a variable and console.log to log the value of my hidden input though, which should be getting an ID ( <?php echo $ticker['ticker'] ?> ) for each form, but it's currently only logging '1'. So when I clicked the button in the first form it looked right, but when I click the others, it's still 1. I think this is because I don't have a unique ID on the hidden input?

How can I change the way I'm keeping track of the hidden input so that I can make an ajax call that will only make an insert on the inputs of the given form WITH the correct ticker ID?

<?php foreach($tickerDisplays as $key => $ticker):?>

    <form id="Items" method="post">
        <label id="ItemLabel">Item 1: </label>
        <input type="text" name="Items[]"><br/>
        <button type="button" class="moreItems_add">+</button>

        <input type="hidden" name="tickerID" id="tickerID" value="<?php echo $ticker['ticker'] ?>">
        <input type="submit" name="saveTickerItems" value="Save Ticker Items">  
    </form>

<?php endforeach;?>


<script type="text/javascript">

$("button.moreItems_add").on("click", function(e) {
var tickerID = $('#tickerID').val();
  var numItems = $("input[type='text']", $(this).closest("form")).length;
  if (numItems < 10) {
    var html = '<label class="ItemLabel">Item ' + (numItems + 1) + ': </label>';
    html += '<input type="text" name="Items[]"/><br/>';
    $(this).before(html);
    console.log(tickerID);
  }
});

</script>

Answer 1

To generate a unique id attribute you should append your ticker value from php to... the id attribute. Or if not the ticker value, at least something that makes it unique. But you don't really need to.

Since all your elements are wrapped in a form tag and are at the same level, you can find to which ticker corresponds the clicked button by finding the hidden input among its siblings :

var tickerID = $(this).siblings('input[name="tickerID"]').val();