jQuery dialog not open second time

Question

I am using jquery dialog box to edit product on Edit click. It is open on first product but not on second product while i am making a list for product

following is jquery dialog box code

$(function() {
    $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 570,
        width: 300,
        modal: true,
        buttons: {
            "Update": function() {
                window.location.href = '<?=base_url()?>cart/remove_cart_prod/';
        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    },
        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        }
    });

    $( "#edit-item" ).click(function() {
        $( "#dialog-form" ).dialog( "open" );
    });
});

and finally is my php code

<div id="dialog-form" title="Edit <?=$prodname?>">
        <p class="validateTips">All form fields are required.</p>
        <form action="<?=base_url()?>cart/remove_cart_prod/" method="post">
          <fieldset>
            <label for="size">Size</label>
            <select id="size" name="size" onchange="calculate(this)">
              <option value="">Choose Your Size</option>
                <?php
                    $sizequery = $this->db->query("SELECT * FROM size WHERE product_id = " . $proddata->id . " and status = 1");
                    if($sizequery->num_rows() > 0) 
                    {
                        foreach($sizequery->result() as $row) 
                        {
                            $prodsize = $row->size_from .' x '. $row->size_to;
                ?>
              <option value="<?=$prodsize?>" id="<?=$row->price?>"><?=$row->size_from?> x <?=$row->size_to?></option>
              <?php } } ?>
            </select>
            <label for="quantity">Quantity</label>
            <select id="quantity" name="quantity" onchange="calculate(this)">
              <option value="">Choose Your Quantity</option>
                <?php
                    $query = $this->db->query("SELECT * FROM quantity WHERE product_id = " . $proddata->id . " and status = 1");
                    if($query->num_rows() > 0) 
                    {
                        foreach($query->result() as $row) 
                        {
                            for($i = $row->quantity_from; $i <= $row->quantity_to; $i++)
                            {   
                ?>
              <option value="<?=$i?>" id="<?=$row->discount?>">
              <?=$i?>
              </option>
              <?php } } } ?>
            </select>
            <label for="color">Color</label>
            <select id="color" name="color" onchange="calculate(this)">
              <option value="">Choose Your Color</option>
              <option value="2">2 Color</option>
              <option value="3">3 Color</option>
              <option value="4">4 Color</option>
            </select>
            <label for="shippint_time">Shiping Time</label>
            <select id="shipping_time" name="shipping_time" onchange="calculate(this)">
              <option value="">Choose Your Shipping Time</option>
              <option value="0">Normal Shipping FREE</option>
              <option value="100">Express Shipping 100$</option>
            </select>
          </fieldset>
          <div class="pricebox">
            <p>Product Price: <span>$</span><span id="product_price"></span></p>
            <p>Product Discount: <span>$</span><span id="product_discount"></span></p>
            <p>Total Price: <span>$</span><span id="result"></span></p>
          </div>
        </form>
      </div>
      <!-- end dialog box -->
      <div class="six columns" style="padding:0px;"><a href="javascript:void(0)" id="edit-item">Edit</a> | <a href="<?=base_url()?>cart/remove_cart_prod/<?=$item['rowid']?>" class="duplicate11" id="<?=$proddata->id?>">Remove</a> | <a href="<?=base_url()?>cart/duplicate_cart_prod/<?=str_replace(' ', '-', $prodname)?>/<?=str_replace(' ', '-', $item['size'])?>/<?=$item['qty']?>/<?=$item['price']?>/<?=$item['color']?>/<?=$item['shipping']?>/<?=$item['discount']?>" class="duplicate11" id="<?=$proddata->id?>">Duplicate</a></div>

dialog should open that specific dialog box when i click on "Edit"

Answer 1

When the code $( "#dialog-form" ).dialog( "open" ); has been executed, the #dialog-form DIV is removed from the original position in HTML and appended at the last part of the body element.

Can you check the #dialog-form DIV can be shown even if the element moved into the last part of the body element?

If this is not the reason for the problem, could you see the javascript console if there is no javascript errors?

• Use the keyboard shortcut Command - Option - J (Mac) or Control -Shift -J (Windows/Linux).
• Select View > Developer > JavaScript Console.