javascript - Uploading a CSS id to a database -

i have javascript / jquery creates 145 squares. can clicked on , change class of square. squares have id each one, going 1 - 145.

this script making buttons:

var number = 1  function makebutton() {     var button1 = "<div id=\"number\" class=\"inner\" style=\"display:inline-block; margin-top:5px; margin-right: 5px;\"><p>!</p></div>"     var button2 = button1.replace("number", number)     $("#buttonz").append(button2);     // append new elements     number += 1 }; 

this script creating squares: (the slots variable 145)

function addbuttons(){     (i = 0; < slots; i++) {         makebutton();             $(document).ready(function(){                 $('.inner').click(function(){                             $(this).addclass("selected");                             $(this).removeclass("inner");     }); });      } }           $(document).ready(function(){                 $('#clearslots').click(function(){                             $('.selected').addclass("inner");                             $('.selected').removeclass("selected");                             s = 0;      }); }); 

i have mysql database has columns,

• id

• istaken

• picturelink (already declared variable)

what want when click button (select squares), should id whatever square(s) have selected, set istaken 1 (corresponding id), , upload picturelink database.

picturelink link picture replace square (same dimensions picture) , if presses button (select squares) have set picture. squares picture won't select able, else's square. finally, should able select many squares want , have them update.

sorry if confusing, thanks!

move click handler code out of loop. add new handler each existing element every iteration first element end 145 click handlers bound it.

also there no need wrap click handler in document.ready

within event handler, this element clicked . can't repeat id's in page index of element

function addbuttons() {     (i = 0; < slots; i++) {         makebutton();     }     // finish adding elements before adding click handler     $('.inner').click(function () {         // `this` element event occurred on         var index = $(this).index();         $.post('/path/to/server/script/', { taken: index}, function(resp){             // validate resp , else needed upon success of ajax here         });          $(this).addclass("selected");         $(this).removeclass("inner");     }); }