Odtnhj

I am using jquery sortable to sort some elements but now I want to be able to order them and save the order to the database.

So I figured the best way to do this is get the index of the element.

This is my html (it's dynamic so there can be infinite categories and questions):

<form id="lijstform">
 <div class="row">
 <div class="col-md-8">
 <label class="lijstnaamtitle">Lijst naam</label>
 <input class="form-control name_list catinput lijsttitle" type="text" name="lijsttitle">
 </div>
 </div>
 <div id="dynamic_field" class="ui-sortable">
 <div class="row sortwrap ui-sortable-handle" id="1">
 <div class="col-md-8">
 <input type="text" name="category" placeholder="1. Voeg een categorie toe" class="form-control name_list catinput">
 <i class="mdi mdi-sort dragndrop"></i>
 <div class="questionlist questionwrap">
 <div class="row">
 <div class="col-md-8">
 <button class="btn btn-success questionbutton">Extra vraag</button>
 <input type="text" name="question" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput">
 </div>
 <div class="col-md-4">
 </div>
 </div>
 </div>
 </div>
 <div class="col-md-4">
 </div>
 </div>
 <div class="row sortwrap ui-sortable-handle" id="2">
 <div class="col-md-8">
 <input type="text" name="category" placeholder="2. Voeg een categorie toe" class="form-control name_list catinput"> <i class="mdi mdi-sort dragndrop"></i>
 <div class="questionlist questionwrap">
 <div class="row">
 <div class="col-md-8">
 <button class="btn btn-success questionbutton">Extra vraag</button>
 <input type="text" name="question" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput"> </div>
 <div class="col-md-4"> </div>
 </div>
 </div>
 </div>
 <div class="col-md-4">
 <button id="addcategory" class="btn btn-danger btn_remove removebutton">X</button>
 </div>
 </div>
 <div class="row sortwrap" id="3">
 <div class="col-md-8">
 <input type="text" name="category" placeholder="3. Voeg een categorie toe" class="form-control name_list catinput"> <i class="mdi mdi-sort dragndrop"></i>
 <div class="questionlist questionwrap">
 <div class="row">
 <div class="col-md-8">
 <button class="btn btn-success questionbutton">Extra vraag</button>
 <input type="text" name="question" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput"> </div>
 <div class="col-md-4"> </div>
 </div>
 </div>
 </div>
 <div class="col-md-4">
 <button id="addcategory" class="btn btn-danger btn_remove removebutton">X</button>
 </div>
 </div>
 <div class="row sortwrap" id="4">
 <div class="col-md-8">
 <input type="text" name="category" placeholder="4. Voeg een categorie toe" class="form-control name_list catinput"> <i class="mdi mdi-sort dragndrop"></i>
 <div class="questionlist questionwrap">
 <div class="row">
 <div class="col-md-8">
 <button class="btn btn-success questionbutton">Extra vraag</button>
 <input type="text" name="question" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput"> </div>
 <div class="col-md-4"> </div>
 </div>
 </div>
 </div>
 <div class="col-md-4">
 <button id="addcategory" class="btn btn-danger btn_remove removebutton">X</button>
 </div>
 </div>
 </div>
</form>

I already have code which adds a number to the placeholder of the input fields.

function updatePlaceholders() 
 $('#input-field-id').val($('#input-field-id').val() + 'more text');
 // Sortable code
 let df = $('#dynamic_field');
 df.find('input[name^=cat]').each(function(i) 
 $(this).attr("placeholder", i + 1 + ". Voeg een categorie toe");
 );
 df.find('.sortwrap').each(function(i) 
 $(this).attr("id", i + 1);
 );
 df.find('.catinput').each(function(i) 
 var index = $(this).index();
 $(this).val(i + 1 + '.' + ' '+index);
 );
 df.find('.questionlist').each(function() 
 $(this).find('input[name^=qu]').each(function(i) 
 $(this).attr("placeholder", i + 1 + ". Voeg een vraag toe");
 );
 );

Every add or delete I call the function again to update the numbers:

$('#dynamic_field').on('click', '.btn_remove', function() 
 $(this).closest('.row').remove();
 updatePlaceholders();
);
$('#addcategory').on('click', function() 
let t = $(template)
 $('#dynamic_field').append(t);
 updatePlaceholders();
);

This is what I tried to get the indexes:

df.find('.catinput').each(function(i) 
 var index = $(this).index();
 $(this).val(i + 1 + '.' + ' '+index);
 );

But this shows all indexes as being 0, even after adding new input fields. How can I get it to work?

From the jQuery docs, it says:

If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

Each of your catinput classes are in a different div so they are not siblings. That's why .index() is returning 0 for each.

If you want the index of that element within your collection, why don't you just use the i parameter that you have already defined? Since the first parameter of the .each() callback is the index of that element (docs).

i.e.

df.find('.catinput').each(function(i) 
 var index = i;
 //rest of logic
);