未定义的索引和表单无法正常工作

Hello Friends I am having issue with sizes option on my page this is the form of sizes

<!-- Sizes And Quantity [Onclick Modal]-->
<div class="form-group col-md-3">
    <label>Sizes & Quntity<span class="required">*</span>:</label>
    <button class="btn btn-default form-control btn-info" onclick="jQuery('#sizesModal').modal('toggle'); return false;">Sizes & Quantity</button>
</div>
<!-- Sizes & Quantity Preview -->
<div class="form-group col-md-3">
    <label for="sizes">Size & Quantity Preview:</label>
    <input type="text" name="sizes" id="sizes" class="form-control" value="<?= ((isset($_POST['sizes']))?sanitize($_POST['sizes']):''); ?>" disabled/>
</div>

and this is modal it is using when click on button

<!-- Modal for sizes & quantity -->
<div class="modal fade" id="sizesModal" tabindex="-1" role="dialog" aria-labelledby="sizesModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="sizesModalLabel">Size & Quantity</h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
            <?php for($i=1; $i <= 12; $i++): ?>
                <!-- Size Edit -->
                <div class="form-group col-md-4">
                    <label for="size<?= $i; ?>">Size</label>
                    <input type="text" class="form-control" id="size<?= $i; ?>" name="size<?= $i; ?>" value="<?= ((!empty($sArray[$i-1]))?$sArray[$i-1]:''); ?>" />
                </div>
                <!-- Quantity Edit -->
                <div class="form-group col-md-2">
                    <label for="qty<?= $i; ?>">Quantity</label>
                    <input type="number" class="form-control" id="qty<?= $i; ?>" name="qty<?= $i; ?>" value="<?= ((!empty($qArray[$i-1]))?$qArray[$i-1]:''); ?>" min="0"/>
                </div>
            <?php endfor; ?> 
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="updateSizes();jQuery('#sizesModal').modal('toggle');return false;">Save changes</button>
      </div>
    </div>
  </div>
</div>

And this is function to update sizes

function updateSizes(){
    var sizeString ='';
    for (var i= 1; i<=12; i++){
        if(jQuery('#size'+i).val() != ''){
            sizeString += jQuery('#size'+i).val()+':'+jQuery('#qty'+i).val()+',' ;
        }
    }
    jQuery('#sizes').val(sizeString);
}

My issues are
1. When the form is submited and if it gives error the sizes field shouldn't be black it should have already entered values like every feild holds them it should do the same it shouldn't erase them so that user don't need to re-enter them
2.Whenever i use 'sizes' in php it gives me error as sizes is undefined.

This is PHP where i am using it its on the same page

if ($_POST) {
if (!empty($_POST['sizes'])) {
                $sizeString = sanitize($_POST['sizes']);
                $sizeString = rtrim($sizeString,',');
                echo $sizeString;
                $sizesArray = explode(',', $sizeString);
                $sArray = array();
                $qArray = array();
                foreach ($sizesArray as $ss) {
                    $s = explode(':', $ss);
                    $sArray[] = $s[0];
                    $qArray[] = $s[1];
                }
            }
            else {
                $sizesArray = array();
            }
$required = array('//Some Arrays' 'sizes');
            foreach ($required as $field) {
                if ($_POST[$field] == '') {
                    $errors[] = 'All Fields with <span class="required">*</span> are required.';
                    break;
                }
            }

i have rechecked the entire code 5 times now but i didn't find anything at all. Please help me.