title: how to change button value through user input
body: <p>the scenario is like i have a  button when it appends onto the page it creates an object with some properties of that object and add that object in an array now the thing i want to do is having that button value and change it to what user want but at the same time it should update in array[object{button{value:''}}] . i tried but what it does is it over writes all button objects and i want every object to have its own value please help me thorugh this </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>if (ui.draggable.data('type') == "button")
  { 
   document.getElementById('buttonDiv').style.display = "block";
   
  
   btn_id++;
      $( "&lt;br&gt;&lt;input type='submit' class='btn' id='btn-"+btn_id+"' value='buttonsss'&gt;" ).text(ui.draggable.text()).appendTo( this ).click(function()
    {   
    
       var color= button['button'].color=$('#btn_color').val();
    var Bcolor= button['button'].Bcolor=$('#btn_bcolor').val();
    $(this).css('color',color);
    $(this).css('background',Bcolor);
    
    var value= $(this).val($('#btn_value').val());
       value= button['button'].value=$('#btn_value').val();
    
     $("#btn_remove").click(function(){
           $(this).remove();
     arr.splice(ui.draggable.data('type'),1);
     document.getElementById('buttonDiv').style.display = "none";
      });
    });
     
   var button = {
      button: {
    type: 'button',
          color: 'white',
          width: '15px',
    backgroundcolor:'white',
    value: ' My Button',
    id:'btn-"'+btn_id+'"',
    control:'button',
      name:'',
      label:'My Button',
      type:'',
    status:'',
    style:'',
     left:'',
      center:'',
       right:'',
  
      }
  }
        var objectName = "button";
        arr.push(button);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>//for changing  button properties form
  &lt;div id="buttonDiv"  style="display:none;" class="answer_list" &gt;  
  color:&lt;br&gt;
  &lt;input id="btn_color" type="text" name="color"&gt;
  &lt;br&gt;  
  background-color:&lt;br&gt;     
  &lt;input id="btn_bcolor" type="text" name="Bcolor"&gt;
  &lt;br&gt;
  value:&lt;br&gt;     
  &lt;input id="btn_value" type="text" value="buttonname" placeholder="set your name"&gt;
  &lt;br&gt;
  Update component:&lt;br&gt;
  &lt;input id="update" type="button" value="update"/&gt;
  &lt;br&gt;
  Remove component:&lt;br&gt;
  &lt;input id="btn_remove" type="button" value="remove"/&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>kindly guide me through it would of great help thanks and i hope that everyone can get what iam trying to say. </p>