Using jQuery to select a class that occurs more than once

Question

So I have a list of items from a database which I have iterated through, and I made each item a modal where the user can edit each item, such as item->name, item->colour, item-title etc.

Each <input></input> has a class edit-title for the title, and edit-name for the name, and so on.

Since I'm using ajax to send this information to my database I have to use jQuery, so I know how to do this if it was one button that occurred once, but not multiple times.

Here is what I'm using to get the data:

var title = $('.e-title').val();
var id = $('.e-id').val();
var subject = $('.e-class').val();
var date = $('.e-due').val();
var description = $('.e-description').val();

But every time, only the first nth-child() gets picked, no matter which button I press. How would I maybe find the closest instances of those classes for jQuery to pick up?

HTML

<div class="e-modal-form">

        <label id="e-id" style="display:none;" class="e-id"> {{ $assignment->id }} </label>
        <h5>Title</h5> <input class="form-control e-title" type="text" value="{{ $assignment->title }}"/> <br>
        <h5>Subject<h5> <select class="form-control e-class" value="{{ $assignment->class }}"> <option> e.g. Chemistry @foreach([1,2,3,4] as $num) <option> {{$num}} </option> @endforeach </select> <br>
        <h5>Due Date</h5> <input class="form-control e-due" type="date" min="2016-01-02" value="{{ $assignment->created_at->format('Y-m-d') }}"> <br>
        <h5>Description</h5> <textarea class="form-control e-description" rows="4">{{ $assignment->description }}</textarea>
        <button class="e-btn-edit e-btn e-update-button">
           <span class="glyphicon glyphicon-floppy-save"></span> Save
        </button>

      </div>

My updateAssignment Function

function updateAssignment()
{

  var $container = $(this).closest('.e-modal-form');
  var title = $container.find('.e-title').val();
  var id = $container.find('.e-id').val();
  var subject = $container.find('.e-class').val();
  var date = $container.find('.e-due').val();
  var description = $container.find('.e-description').val();

  alert(title);

  $.get('/updateAssignment', {title: title, id: id, class: subject, date: date, description: description}, function()
  {


  });



}

How I'm trying to call it from the document.ready handler

$('.e-update-button').click(function() {

      updateAssignment();

 });

Answer 1

To do this you can traverse the DOM from the button which was clicked to get the relevant inputs within the same div container. Try this:

$('.e-btn-edit').click(function() {
    var $container = $(this).closest('.e-modal-form');
    var title = $container.find('.e-title').val();
    var id = $container.find('.e-id').val();
    var subject = $container.find('.e-class').val();
    var date = $container.find('.e-due').val();
    var description = $container.find('.e-description').val();

    // work with the values here...
});

If the modal div is appended to the DOM after the page is loaded, then you would need to use a delegated event handler on the button, like this:

$(document).on('click', '.e-btn-edit', function() {
    // the rest of the above code...
});

Update

Given the logic flow in your update question, you need to amend your code like this:

function updateAssignment() {
    var $container = $(this).closest('.e-modal-form');
    var title = $container.find('.e-title').val();
    var id = $container.find('.e-id').val();
    var subject = $container.find('.e-class').val();
    var date = $container.find('.e-due').val();
    var description = $container.find('.e-description').val();

    // work with the values here...
});

$('.e-btn-edit').click(updateAssignment);

Answer 2

You need to traverse back to the parent which holds all the elements, And from there find all the required element and extract the value. The code would be like below

$('.e-btn').on('click',function(){
     var $parentDiv = $(this).closest('div.e-modal-form');

     var title = $parentDiv.find('.e-title').val();
     var id = $parentDiv.find('.e-id').val();
     var subject = $parentDiv.find('.e-class').val();
     var date = $parentDiv.find('.e-due').val();
     var description = $parentDiv.find('.e-description').val();

     //your stuff here
    });