JS - Color Picker Only first one works

Question

I am using Bootstrap Colorpicker 2.1 in order to display two colour pickers in a form. Everything works fine using one input however, when I add the second one only the first one is working. Maybe because they are sharing the same class…

Any Idea why is this happening?

<form method="post">

<p><?php _e("Box 1: " ); ?>
<input 
class="form-control demo" 
data-horizontal="true" 
id="demo_forceformat" 
placeholder="<?php echo $box1?>" 
type="text" 
name="box1" 
value="<?php echo $box1?>" 
size="20">
<?php _e(" Default: rgba(14,112,209,1)" ); ?></p>

<p><?php _e("Box 2 " ); ?>
<input 
class="form-control demo" 
data-horizontal="true" 
id="demo_forceformat" 
placeholder="<?php echo $box2?>" 
type="text" 
name="box2" 
value="<?php echo $box2?>" 
size="20">
<?php _e(" Default: rgba(144,112,209,1)" ); ?></p>

Answer 1

I needed to call the function using

$(function(){
    $('#demo_forceformat_2').colorpicker({
            format: 'rgba', // force this format
            horizontal: true
        });
});