same value is assigned to all elements that have different id

Question

I am building and application that has a customized shopping cart.

I am using fancybox (ajax) to get color-codes for five different sofa types (Furniture). After fancybox loads contents (colors) from database I am able to choose and select color for each sofa type. I have associated a code to each color which I am getting in a variable (colorCode). I am able to get the color’s code from the html page, code is

$('body').on('click', '.margin', function() {
    // Get the code of selected Color
    colorCode= $(this).children('.color-code').text();

  //Write the selected color-code in the div-element on frontend so that user can see the selected color code. 
    $('#'+selectedIdCode).empty().text(colorCode);
  }); 

Now if i click on the select option, it will display fancybox with colors, i can select colors by clicking on them and the selected color is displayed in the color’s div-element to user

But this works fine for first time only and if i select color for the second product it behaves accordingly but in the end it will update the color-code of the previous Sofa to the new one.

Suppose I selected the color of a Single-Seater sofa it writes in the color-code div-element (6). But when I select the color-code for second sofa, Two-Seater sofa. It overwrites the color-code div element of the Single-Seater sofa as well to (20).

See the 1 Seater sofa's code has been changed from (6) to (20). Similarly now if i select color for 3 Seater sofa, It will overwrite the color codes of 2-Seater as well as 1-Seater sofa.

Problem is when ever a new color is selected for a product the previous color-codes of other products are also over-written by the latest color-code. I think issue lies here

$('body').on('click', '.margin', function() {

---

SAMPLE HTML CODE

 <td>
    <div class="btn-group select-color-minwidth">
      <div class="btn" id="1seater-code">Select Color</div>
        <a class="code-selector fancybox.ajax btn" id="1seater">                          
            <i class="fa fa-pencil"></i>                           
        </a>
    </div>                    
  </td>

  <td>
    <div class="btn-group select-color-minwidth">
      <div class="btn" id="2seater-code">Select Color</div>
        <a class="code-selector fancybox.ajax btn" id="2seater">                          
            <i class="fa fa-pencil"></i>                           
        </a>
    </div>                    
  </td>
  <td>
    <div class="btn-group select-color-minwidth">
      <div class="btn" id="3seater-code">Select Color</div>
        <a class="code-selector fancybox.ajax btn" id="3seater">                          
            <i class="fa fa-pencil"></i>                           
        </a>
    </div>                    
  </td>

jQUERY CODE

$(document).ready(function() {

   $('.code-selector').click(function(){    
        var colorCode; 
        //Which category is clicked   1 Seater or 2 Seater or 3 Seater etc
        var selectedId = $(this).attr('id');
        //The id of the Div-Element where the value for selected code will be displayed
        var selectedIdCode = selectedId+'-code';

     $(".code-selector").fancybox({
        padding:10,
        margin:100,
        openEffect : 'elastic',
        openSpeed  : 150,
        closeEffect : 'elastic',
        closeSpeed  : 500,
        closeClick : false,
        href : 'fancyboxajax.php',
        helpers : {
          overlay : null
        } 
      });

     $('body').on('click', '.margin', function() {
        // Get the code of selected Color
        colorCode= $(this).children('.color-code').text();

        //Update the selected Color code
        $('#'+selectedIdCode).empty().text(colorCode);
      });
    });  
});

And Finally the FANCYBOXAJAX.PHP

 <script type="text/javascript">
  $('.margin').click(function(){    

     //Remove selection from other and apply to the Current one
     $('.selected').css('display','none');
     $(this).children('.selected').css('display','block');      

     // Show the save button
     $('.save-button').css('display','block');      

     // take user to Save button
     $(".fancybox-inner").animate(
        { scrollTop: 0 },
        {
          duration: 100,
          easing: 'linear'
     });      

     // Close the Fancy box
     $('#close-njk').click(function() {
        $.fancybox.close();    
     });
  });
 </script>


    <div class="tiles">
      <p>Select  any color and click on save Button, Below</p>

      <div class="save-button">
        <button class=" col-3 btn btn-primary " id="close-njk">Save</button>
      </div>

      <?php

        $db->set_table('raw_material');
        $results = $db->all();

        foreach ($result as $result) {

          echo '<div class="margin">
          <div class="selected"><img src="check_success-64.png"></div>
          <img class="njk-img"  src="gallery/raw_material_tiles_2/'.$result['material_name'].'.jpg" width="100" height="75">
          <div style="display:none" class="color-code">'.$result['id'].'</div>
          </div>';
        }

      ?>

    </div>

Any assistance in this regard is appreciated.

Thanks

Answer 1

Luckily i found its solution

My main problem was that i was trying to get the color-code from the front end or my Html page. But I when i tried to access the id from the fancyboxajax.php page it changed/updated only the specific id rather than all the ids. So i passed the id as a variable to fancybox and from the page which was loading in the fancybox i assigned the color-codes to the specific id.

here is code illustration

 $(document).ready(function() {    
  $('.code-selector').click(function(){
    var colorCode; 
    //Which category is clicked   1 Seater or 2 Seater or 3 Seater etc
    var selectedId = $(this).attr('id');
    //The id of the Div-Element where the value for selected code will be displayed
    var selectedIdCode = selectedId+'-code';
    //Get the respective selected option id
    var selectedOption = '#'+selectedId+'-option';
    //Get the respective selected option id value
    var selectedOptionValue = $(selectedOption).find(":selected").attr('value');      
    $(".code-selector").fancybox({
      padding:10,
      margin:100,
      openEffect : 'elastic',
      openSpeed  : 150,
      closeEffect : 'elastic',
      closeSpeed  : 500,
      closeClick : false,
      href : 'fancyboxajax.php?code='+selectedIdCode+'&option='+selectedOptionValue,
      helpers : {
        overlay : null
      }
    });
  });
});  

and the fancyboxajax.php page respectively

var code ="<?php echo $_GET['code']; ?>";
  var option = "<?php echo $_GET['option']; ?>";
  // Close the Fancy box
  $('#close-njk').click(function() {
    $.fancybox.close(); 
    $('#'+code).text(color);  
    $('#'+code+'-color').val(color);      
  });

Thank you to all those who spent time on my question and gave valuable suggestions.