How to rewrite this code and organize the function?

Question

css

Hello colleagues. Recently started working with jQuery and JS in general. I wrote this code:

The bottom line is that when you click on the input, a button pops up. I wonder how you can shorten / rewrite the code? Considering that there will be 20 such inputs.

And why doesn't the on('change') function work? If I want the button to appear only when the input is written.

I will be very grateful for the answers and recommendations!

Answer 1

For example like this codepen.io/anon/pen/MapRxw

Answer 2

Hang a common handler on the form and combine all buttons with 1 class ( .send_button ). Buttons, by the way, should be placed in .form_group , it will be more logical. And then:

$("form").on("focus", ".form_group > input", function(){
   $(this).next(".send_button").fadeIn();
}).on("blur", ".form_group > input", function(){
   $(this).next(".send_button").fadeOut();
});

“When they wrote in input” is oninput , and onchange is change + loss of focus.

Answer 3

codepen.io/anon/pen/zvZXbo
Maybe keydown is better?