jquery_jeditable: control max number from precedent input

Question

I have this problem with jquery_jeditable to cotrol max number by precedent input. I want the second value minor of the precedent value or equal, but I don't understand how capture the id of current "field" (this.id) for to build the id of precedent number and to read its value. thanks for any help Simple html:

$('.editable-text').editable('save.php',{
                id:'pk',
                type:'number',
                tooltip:'____',
                placeholder:'Grams',
                max:2000,
                width:50
                
});

                
$('.editable-text2').editable('save.php',{
                id:'pk',
                type:'number',
                tooltip:'____',
                placeholder:'Grams',
                max:function(id){return $('#'+id+'_wInit').text()},
                width:50
                
});

console.log('precedent value first row: '+$('#1_wEnd_wInit').text())

console.log('precedent value second row: '+$('#2_wEnd_wInit').text())

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/2.0.17/jquery.jeditable.min.js"></script>

<span style="display: inline-block;width:80px;">Precedent</span>
&nbsp;
<span style="display: inline-block;width:80px;">Actual</span>
<br/>
<span style="display: inline-block;width:80px;" id="1_wEnd_wInit" class="editable-text" >1000</span>
&nbsp;
<span style="display: inline-block;width:80px;" id="1_wEnd" class="editable-text2">60</span>
<br/>
<span style="display: inline-block;width:80px;" id="2_wEnd_wInit" class="editable-text" >500</span>
&nbsp;
<span style="display: inline-block;width:80px;" id="2_wEnd" class="editable-text2" >20</span>

Answer 1

Alternative way is using event.currentTarget this will give reference to current element which is clicked i.e : editable-text2 then simply use .attr("id") to get id and set same to max.

Demo Code :

$('.editable-text').editable('save.php', {
  id: 'pk',
  type: 'number',
  tooltip: '____',
  placeholder: 'Grams',
  max: 2000,
  width: 50

});


$(".editable-text2").editable('save.php', {
  id: 'pk',
  type: 'number',
  tooltip: '____',
  placeholder: 'Grams',
  max: function() {
    //use currenttarget
    var id = $(event.currentTarget).attr("id")
    console.log($(event.currentTarget).attr("id"))
    console.log($('#' + id + '_wInit').text())
    return $('#' + id + '_wInit').text()
  },
  width: 50

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/2.0.17/jquery.jeditable.min.js"></script>

<span style="display: inline-block;width:80px;">Precedent</span> &nbsp;
<span style="display: inline-block;width:80px;">Actual</span>
<br/>
<span style="display: inline-block;width:80px;" id="1_wEnd_wInit" class="editable-text">1000</span> &nbsp;
<span style="display: inline-block;width:80px;" id="1_wEnd" class="editable-text2">60</span>
<br/>
<span style="display: inline-block;width:80px;" id="2_wEnd_wInit" class="editable-text">500</span> &nbsp;
<span style="display: inline-block;width:80px;" id="2_wEnd" class="editable-text2">20</span>