title: filter data-value from array with jquery
body: <p>This is my full code.</p>
  
  <ol>
  <li>I want to store value in a array like mentioned: <code>dataArray = ["size", "color", "material"];</code></li>
  <li>Each "form-row" div contain data-value like "size", "color", "material" from the "dataArray"- array;</li>
  <li>when I click on the "create order" button, In this case it will create a data-value called "color", becoz there is already two div contain "size", and "material" field; Each single click of the button create the structure once at a time;</li>
  <li>I have also "delete" feature mentioned in "/<em>--remove div--</em>/" section;</li>
  <li>But there is a issue to filter/find the right thing; There is a problem in "srch()" -function; plz help me out;</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//global variables
  var dataArray = ["size", "color", "material"];
  var dataArrayCreated = [];
  
  var glb_array_len = dataArray.length;
  var tot_len = $("#form-row_cst").find(".form-row").length;
  
  /*--create_element--*/
  function create_elment() {
    var html_structure = "&lt;div class='form-row' data-value="+ dataArrayCreated[0] +"&gt;&lt;div class='form-group col-md-3 col-sm-12'&gt;&lt;label class='ad_prd_lbl'&gt;Option name&lt;/label&gt;&lt;input type='text' class='form-control' placeholder='"+ dataArrayCreated[0] +"' value='"+ dataArrayCreated[0] +"' id="+ dataArrayCreated[0]+'_val' +"&gt;&lt;/div&gt;&lt;div class='form-group col-md-8 col-sm-12'&gt;&lt;label class='ad_prd_lbl'&gt;Option values&lt;/label&gt;&lt;input type='text' id="+ dataArrayCreated[0]+'_inp' +" class='form-control' placeholder='Separate options with a comma'&gt;&lt;/div&gt;&lt;div class='form-group col-md-1 col-sm-12'&gt;&lt;button class='but_all btn_rmv' type='button'&gt;&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'&gt;&lt;path d='M16 6a1 1 0 1 1 0 2h-1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V8H4a1 1 0 1 1 0-2h12zM9 4a1 1 0 1 1 0-2h2a1 1 0 1 1 0 2H9zm2 12h2V8h-2v8zm-4 0h2V8H7v8z'&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;";
  
    $("#form-row_cst").append(html_structure).appendTo("#form-row_cst");
  }
  
  //search function
  function srch() {
    $.each(dataArray, function (index, value) {
      console.log(value);
      $("#form-row_cst").find(".form-row").each(function () {
        console.log($(this).attr('data-value'));
        if( $(this).attr('data-value') !== value ) {
          dataArrayCreated[0] = value;
          console.log("found - "+dataArrayCreated[0]);
        }
      });
    });
  }
  
  //main function
  function main_fn() {
   if( tot_len &lt;= glb_array_len ) {
     //console.log("count Data - "+ tot_len+"-items");
     srch();
     create_elment();
   }
   else {
     console.log("Invalid Data - "+ tot_len+"-items");
   }
  }
  
  /*---click btn to create structure--*/
  $("#clone_btn").click(function(){
    //find created element from list
    main_fn();
  
    if( ($("#form-row_cst").find(".form-row").length) &gt; (dataArray.length)-1 ) {
      $(this).hide();
    }
  });
  
  /*--remove div--*/
  $(document).on("click","#form-row_cst .btn_rmv", function(){
    //check if this div is last child of "#form-row_cst"
    if( $("#form-row_cst").find(".form-row").length-1 &lt; 1) {
      alert("sorry, you can't delete this items");
    }
    else {
      //remove div
      $(this).parents(".form-row").remove();
    }
    if( ($("#form-row_cst").find(".form-row").length) &lt; (dataArray.length)+1 ) {
      $("#clone_btn").show();
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    color: rgba(70, 90, 110, 0.85);
    font-size: 0.8rem;
    line-height: 1.6;
    font-weight: 400;
    background-color: #f3f6f9;
  }
  
  .box {
    border-radius: 3px;
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.15);
    background-color: #fff;
    position: relative;
    margin-bottom: 1.5rem;
  }
  
  .order_details {
    padding: 15px;
  }
  
  .dropdown_div {
    display: none;
  }
  
  .gry_of_bg {
    background-color: #f9fafb;
  }
  
  .form-row&gt;.col, .form-row&gt;[class*=col-] {
    padding-right: 5px;
    padding-left: 5px;
  }
  
  .form-result_outer {
    padding: 15px 0px 0px;
  }
  
  label {
    display: inline-block;
    margin-bottom: .5rem;
  }
  
  .ad_prd_lbl {
    font-size: .8rem;
    color: #212b35;
    margin-bottom: .25rem;
  }
  
  #form-row_cst .form-row .form-control,
  #form-row_cst .but_all {
    min-height: 36px;
  }
  
  .input_tags_cnt {
    position: relative;
    width:100%;
  }
  
  #form-row_cst .input_tags_cnt .bootstrap-tagsinput {
    background-color: #fff;
    box-shadow: none;
    border-color: rgba(120, 130, 140, 0.2);
    min-height: auto;
  }
  
  .bootstrap-tagsinput {
    width: 100%;
    font-size: 0;
    display: inline-block;
    padding: 4px 6px;
    color: #555;
    vertical-align: middle;
    border-radius: 4px;
    max-width: 100%;
    line-height: 22px;
    cursor: text;
    border: 1px solid #ccc;
  }
  
  .bootstrap-tagsinput input {
    border: none;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    padding: 0 6px;
    margin: 0;
    width: auto;
    max-width: inherit;
  }
  
  #form-row_cst .form-row input,
  #form-row_cst .form-row .bootstrap-tagsinput input {
    color: #222;
    font-size: 0.8rem;
  }
  .input_tags_cnt .bootstrap-tagsinput&gt;input {
    width: 100%;
  }
  
  .but_all {
    padding: 5px 12px;
    border-radius: 3px;
    background: #fff;
    border: 1px solid #c4cdd5;
    line-height: 100%;
    cursor: pointer;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
    min-height: 34px;
  }
  #form-row_cst .but_all {
    margin-top: 24px;
  }
  #form-row_cst .form-row .form-control,
  #form-row_cst .but_all {
    min-height: 36px;
  }
  #form-row_cst .form-row .form-control {
    width: 100%;
  }
  
  .but_all svg {
    width: 20px;
    height: 20px;
    line-height: 100%;
  }
  
  .cbd_table_product_table {
    border: 0px;
    min-width: 650px;
  }
  
  .cbd_table_product_table &gt; thead &gt; tr &gt; th,
  .cbd_table_product_table &gt; tbody &gt; tr &gt; td {
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-bottom: 1px solid #ebeef0;
    vertical-align: top;
    font-size: 0.86rem;
  }
  
  .cbd_table_product_table &gt; thead &gt; tr &gt; th {
    padding: .5rem .4rem;
    color: #212b35;
    font-weight: 500;
  }
  .cbd_table_product_table &gt; thead &gt; tr &gt; th:first-child,
  .cbd_table_product_table &gt; tbody &gt; tr &gt; td:first-child {
    padding-left: 3px;
  }
  
  .custom-checkbox {
    margin: 0rem;
    vertical-align: middle;
    padding: 0px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
  }
  .custom-checkbox .custom-control-input {
    width: 1rem;
    height: 1rem;
    position: relative;
  }
  .custom-control-indicator {
    position: absolute;
    top: .25rem;
    left: 0;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #ddd;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
  }
  .custom-checkbox .custom-control-input:checked~.custom-control-indicator {
    background-color: #17a2b8;
  }
  .custom-checkbox .custom-control-input:checked~.custom-control-indicator {
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' v…M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E);
  }
  
  .tb_Variant_tag {
    font-size: .8rem;
    position: relative;
    padding-right: 10px;
    text-transform: capitalize;
    line-height: 100%;
    display: inline-block;
    vertical-align: middle;
  }
  .color_tb_Variant {
    color: #29bc94;
  }
  .size_tb_Variant {
    color: #ff9517;
  }
  .meterial_tb_Variant {
    color: #763eaf;
  }
  .tb_Variant_tag:after {
    content: "";
    background-color: #637381;
    height: 4px;
    width: 4px;
    position: absolute;
    right: 2px;
    top: 4px;
    font-size: 0;
    border-radius: 50%;
    overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
  &lt;div class="box"&gt;
        &lt;div class="order_details"&gt;
          &lt;header class="prd_hdr clearfix"&gt;
            &lt;h6&gt;Variants&lt;/h6&gt;
          &lt;/header&gt;
          &lt;div class="form-group"&gt;
              &lt;p&gt;Add variants if this product comes in multiple versions, like different sizes or colors.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="clearfix dropdown_div" style="display: block;"&gt;
            &lt;div class="order_details gry_of_bg"&gt;
                &lt;div class="clearfix" id="form-row_cst"&gt;
                    &lt;div class="form-row" data-value="size"&gt;
                        &lt;div class="form-group col-md-3 col-sm-12"&gt;
                            &lt;label class="ad_prd_lbl"&gt;Option name&lt;/label&gt;
                            &lt;input type="text" class="form-control" id="size_val" placeholder="Size" value="size"&gt;
                        &lt;/div&gt;
                        &lt;div class="form-group col-md-8 col-sm-12"&gt;
                            &lt;label class="ad_prd_lbl"&gt;Option values&lt;/label&gt;
                            &lt;input type="text" id="size_inp" class="form-control" placeholder="Separate options with a comma"&gt;
                        &lt;/div&gt;
                        &lt;div class="form-group col-md-1 col-sm-12"&gt;
                            &lt;button class="but_all btn_rmv" type="button"&gt;
                                &lt;svg id="delete-minor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"&gt;
                                    &lt;path d="M16 6a1 1 0 1 1 0 2h-1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V8H4a1 1 0 1 1 0-2h12zM9 4a1 1 0 1 1 0-2h2a1 1 0 1 1 0 2H9zm2 12h2V8h-2v8zm-4 0h2V8H7v8z"&gt;&lt;/path&gt;
                                &lt;/svg&gt;
                            &lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="form-row" data-value="material"&gt;
                        &lt;div class="form-group col-md-3 col-sm-12"&gt;
                            &lt;label class="ad_prd_lbl"&gt;Option name&lt;/label&gt;
                            &lt;input type="text" class="form-control" id="material_val" placeholder="material" value="material"&gt;
                        &lt;/div&gt;
                        &lt;div class="form-group col-md-8 col-sm-12"&gt;
                            &lt;label class="ad_prd_lbl"&gt;Option values&lt;/label&gt;
                            &lt;input type="text" id="material_inp" class="form-control" placeholder="Separate options with a comma"&gt;
                        &lt;/div&gt;
                        &lt;div class="form-group col-md-1 col-sm-12"&gt;
                            &lt;button class="but_all btn_rmv" type="button"&gt;
                                &lt;svg id="delete-minor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"&gt;
                                    &lt;path d="M16 6a1 1 0 1 1 0 2h-1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V8H4a1 1 0 1 1 0-2h12zM9 4a1 1 0 1 1 0-2h2a1 1 0 1 1 0 2H9zm2 12h2V8h-2v8zm-4 0h2V8H7v8z"&gt;&lt;/path&gt;
                                &lt;/svg&gt;
                            &lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
  
                &lt;/div&gt;
                &lt;div class="form-row"&gt;
                    &lt;div class="form-group col-sm-12"&gt;
                        &lt;button class="but_all" type="button" id="clone_btn"&gt;Create order&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>