title: jquery - convert div text to input field
body: <p>I have form with Divs inside.
  Some of them contain texts and have data attribute (ie. data-name)</p>
  
  <p>I'm trying to create JQUERY script that by clicking of a button get the all DIVs attribute and implant input field inside the div.</p>
  
  <p>I'm not sure how the create array of the data attribute for each DIV.
  I'll appreciate your help</p>
  
  <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>$(document).on("click", ".edit-btn", function(e) {
    var element = $(this);
    var data = $(element).parents(".item_edit").data();
    var fieldContent = convert_text_to_form_field(data)
    element.parents(".item").find(".item_edit").html(fieldContent);
  });
  
  
  // this function should get data array of attributes and return form field (input, textarea, etc)
  
  function convert_text_to_form_field(data) {
    fieldValue = "** data something **"
    fieldName = "** data something **"
    fieldType = "** data something **"
    fieldRequire = "** data something **"
    maxFiles = "** data something **"
  
    switch (fieldType) {
      case "input":
        field = "&lt;input type='text' name='" + fieldName + "' value='" + fieldValue + "' /&gt;";
        break;
      case "textarea":
        field = "&lt;textarea type='text' name='" + fieldName + "'&gt;" + fieldValue + "&lt;/textarea&gt;";
        break;
      case "fileArray":
        field = "&lt;input type='file' name='" + fieldName + "' class='multi well well-sm' maxlength='" + maxFiles + "' accept='gif|jpg|jpeg|png|bmp' /&gt;";
        break;
    };
  
    if (fieldRequire = 1)
      field = field + "&lt;span&gt;*&lt;/span&gt;";
    return (field);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form action='#' method='post' id="4" class='item'&gt;
    &lt;div class='item-edit' data-type='fileArray' data-name='file[]' data-maxFiles='1'&gt;LOGO HERE&lt;/div&gt;
    &lt;div class='item-edit' data-type='input' data-name='agnt[name]' data-require='1'&gt;SOME NAME&lt;/div&gt;
    &lt;div class='item-edit' data-type='textarea' data-name='agnt[contact]'&gt;SOME CONTACT&lt;/div&gt;
    &lt;div class='col-md-2 panel-menu'&gt;
      &lt;span class='edit_msg'&gt;&lt;/span&gt;
  
      &lt;a href='#' class='btn btn-success edit_save-btn hidden'&gt;SAVE&lt;/a&gt;
      &lt;a href='#' class='btn btn-success edit-btn'&gt;EDIT&lt;/a&gt;
  
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>