Ajax text field: getting a class of a text field and changing the default value

Question

Goal: change value of current_category_id on click

Input tag where I want my value changed:

 <input type="text" id="current_category_id" class="current_category_id" value="1">

Button, value here changes depending on which row is clicked

 <button type="button" value="${cat.category_id}" class="category_sort btn float-left" data-toggle="modal" data-target="#createCategory">${cat.category_name} (${cat.category_id})</button>

This code gives me undefined

 $(document).on('click', '.category_sort', function (e) {
   e.preventDefault();
   var new_category_id_sort = $(this).val(); 
   document.getElementById('current_category_id').value=e.new_category_id_sort;
 );

How do I fix my document.getElementById?

Answer 1

Using a querySelector

        $(document).on('click', '.category_sort', function (e) {
        e.preventDefault();
            //change value to sort group
            var new_category_id_sort = $(this).val(); 
            var a = document.querySelector('.current_category_id').value;
            document.querySelector('.current_category_id').value = new_category_id_sort;
            fetchgroup();
        });