How to get all data-id input class value where the data-id is same as currently focused field data-id using jQuery?

Question

I have input form html is below,

<input type="text" class="form-control featurecat-item featurecat" value="" data-id="1">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="1">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="1">

<input type="text" class="form-control featurecat-item featurecat" value="" data-id="2">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="2">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="2">

<input type="text" class="form-control featurecat-item featurecat" value="" data-id="3">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="3">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="3">

<input type="text" class="form-control featurecat-item featurecat" value="" data-id="4">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="4">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="4">

Here each group contains three fields(.featurecat-item, .featurecat-label, .featurecat-isactive) class where each group data-id is same.

Using the jquery function(on change/paste/keyup) I need to get the .featurecat-item, .featurecat-label, .featurecat-isactive class input value which data-id is same as the currently focused field data-id.

Following is my sample and not-complete jquery function,

  $(document).ready(function(){

    $(".featurecat").on("change paste keyup", function() {

    //.........
    // var current_id = Current focused field data-id
    // Get the .featurecat-item, .featurecat-label, .featurecat-isactive class input value which data-id is equal to current_id
    //......... 

     var item = $('.featurecat-item').val().replace(/,/g, "");
     var label = $('.featurecat-label').val().replace(/,/g, "");        
     var isactive = ($(".featurecat-isactive").prop('checked') == true) ? 1 : 0;

     var data = "item:"+item+"| label:"+label+"| isactive:"+isactive;
     console.log(data);
    });

  });

How can I do this using in jQuery?

Answer 1

• To get data attribute use .data('id') or .attr('data-id')
• To select element with this data attribute use [data-id="...."] selector
• Also to check for :checked you can use .is(':checked')

$(document).ready(function(){

    $(".featurecat").on("change paste keyup", function() {

    //.........
    // var current_id = Current focused field data-id
    // Get the .featurecat-item, .featurecat-label, .featurecat-isactive class input value which data-id is equal to current_id
    //......... 
     var ThisInput = $(this);
     var data_id = ThisInput.data('id');
     var item = $('.featurecat-item[data-id="'+data_id +'"]').val();//.replace(/,/g, "");
     var label = $('.featurecat-label[data-id="'+data_id +'"]').val();//.replace(/,/g, "");        
     var isactive = ($('.featurecat-isactive[data-id="'+data_id+'"]').is(':checked')) ? 1 : 0;

     var data = "item:"+item+"| label:"+label+"| isactive:"+isactive;
     console.log(data);
    });

  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control featurecat-item featurecat" value="" data-id="1">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="1">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="1">

<input type="text" class="form-control featurecat-item featurecat" value="" data-id="2">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="2">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="2">

<input type="text" class="form-control featurecat-item featurecat" value="" data-id="3">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="3">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="3">

<input type="text" class="form-control featurecat-item featurecat" value="" data-id="4">
<input type="text" class="form-control featurecat-label featurecat" value="" data-id="4">
<input type="checkbox" class="filled-in featurecat-isactive featurecat" data-id="4">