Multiple Button Onchange Input Text Value

<div class="button-demo">
   <button type="button" id="btn-background-red" data-background="info-boxs bg-red" class="btn bg-red waves-effect">RED</button>
   <button type="button" id="btn-background-pink" data-background="info-boxs bg-pink" class="btn bg-pink waves-effect">PINK</button>
   <button type="button" id="btn-background-purple" data-background="info-boxs bg-purple" class="btn bg-purple waves-effect">PURPLE</button>
   <button type="button" id="btn-background-deep-purple" data-background="info-boxs bg-deep-purple" class="btn bg-deep-purple waves-effect">DEEP PURPLE</button>
   <button type="button" id="btn-background-indigo" data-background="info-boxs bg-indigo" class="btn bg-indigo waves-effect">INDIGO</button>
   <button type="button" id="btn-background-blue" data-background="info-boxs bg-blue" class="btn bg-blue waves-effect">BLUE</button>
   <button type="button" id="btn-background-light-blue" data-background="info-boxs bg-light-blue" class="btn bg-light-blue waves-effect">LIGHT BLUE</button>
   <button type="button" id="btn-background-cyan" data-background="info-boxs bg-cyan" class="btn bg-cyan waves-effect">CYAN</button>
   <button type="button" id="btn-background-teal" data-background="info-boxs bg-teal" class="btn bg-teal waves-effect">TEAL</button>
   <button type="button" id="btn-background-green" data-background="info-boxs bg-green" class="btn bg-green waves-effect">GREEN</button>
   <button type="button" id="btn-background-light-green" data-background="info-boxs bg-light-green" class="btn bg-light-green waves-effect">LIGHT GREEN</button>
   <button type="button" id="btn-background-lime" data-background="info-boxs bg-lime" class="btn bg-lime waves-effect">LIME</button>
   <button type="button" id="btn-background-yellow" data-background="info-boxs bg-yellow" class="btn bg-yellow waves-effect">YELLOW</button>
   <button type="button" id="btn-background-amber" data-background="info-boxs bg-amber" class="btn bg-amber waves-effect">AMBER</button>
   <button type="button" id="btn-background-orange" data-background="info-boxs bg-orange" class="btn bg-orange waves-effect">ORANGE</button>
   <button type="button" id="btn-background-deep-orange" data-background="info-boxs bg-deep-orange" class="btn bg-deep-orange waves-effect">DEEP ORANGE</button>
   <button type="button" id="btn-background-brown" data-background="info-boxs bg-brown" class="btn bg-brown waves-effect">BROWN</button>
   <button type="button" id="btn-background-grey" data-background="info-boxs bg-grey" class="btn bg-grey waves-effect">GREY</button>
   <button type="button" id="btn-background-blue-grey" data-background="info-boxs bg-blue-grey" class="btn bg-blue-grey waves-effect">BLUE GREY</button>
   <button type="button" id="btn-background-black" data-background="info-boxs bg-black" class="btn bg-black waves-effect waves-light">BLACK</button>
</div>
<div class="form-line">
   <input type="text" class="form-control" name="paket_bg" id="paket_bg" placeholder="Ex: info-boxs bg-pink" autocomplete="off" required>
   <span class="help-block"></span>
</div>

And the javascript

var b1  = $("#btn-background-red");
var b2  = $("#btn-background-pink");
var b3  = $("#btn-background-purple");
var b4  = $("#btn-background-deep-purple");
var b5  = $("#btn-background-indigo");
var b6  = $("#btn-background-blue");
var b7  = $("#btn-background-light-blue");
var b8  = $("#btn-background-cyan");
var b9  = $("#btn-background-teal");
var b10 = $("#btn-background-green");
var b11 = $("#btn-background-light-green");
var b12 = $("#btn-background-lime");
var b13 = $("#btn-background-yellow");
var b14 = $("#btn-background-amber");
var b15 = $("#btn-background-orange");
var b16 = $("#btn-background-deep-orange");
var b17 = $("#btn-background-brown");
var b18 = $("#btn-background-grey");
var b19 = $("#btn-background-blue-grey");
var b20 = $("#btn-background-black");
         
var btnClick = function(e){
   $('[name="paket_bg"]').val($(this).data('background'));
}
            
b1.on('click', btnClick);
b2.on('click', btnClick);
b3.on('click', btnClick);
b4.on('click', btnClick);
b5.on('click', btnClick);
b6.on('click', btnClick);
b7.on('click', btnClick);
b8.on('click', btnClick);
b9.on('click', btnClick);
b10.on('click', btnClick);
b11.on('click', btnClick);
b12.on('click', btnClick);
b13.on('click', btnClick);
b14.on('click', btnClick);
b15.on('click', btnClick);
b16.on('click', btnClick);
b17.on('click', btnClick);
b18.on('click', btnClick);
b19.on('click', btnClick);
b20.on('click', btnClick);

 

Tags: Button OnchangeOnchange jquery